为什么海水这么咸?还不是因为你们这些城市人边游泳边小便!!
《插件推荐:download.js》
基于 Canvas,我们可以方便的对图片进行处理,比如,给图片加个水印,在线做 Logo(体验地址:https://egoist.github.io/slogan)之类。
那图片处理完,怎么下载?我以前的思路都是,将 Canvas 转化成图片,让用户右击另存为,或者上传到服务器,点下载按钮下载。
用 download.js ,不需要传服务器,就能下载。下面是用 Canvas 画一个矩形,点 Canvas 下载图片的示例:
<canvas id="canvas" width="100" height="100"></canvas>
<script src="https://unpkg.com/downloadjs@1.4.6"></script>
<script>
var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'yellow'
ctx.fillRect(0, 0, 80, 80);
canvas.addEventListener('click', function () {
var image = canvas.toDataURL();
download(image, 'slogan-download.png', 'image/png')
})
</script>
插件官网:https://www.npmjs.com/package/download
《HTML5中手势原理分析与数学知识的实践》
背景
现代应用越来越重视与用户的交互及体验,手势是最直接且最为有效的交互方式,一个好的手势交互,能降低用户的使用成本和流程,大大提高了用户的体验。加之,移动屏一般都支持多点触控,所以越来越多项目支持手势。
概要
先介绍了需要的数学知识,然后介绍了常用手势(拖动,双指缩放,旋转,单指缩放,旋转)的具体实现。
阅读地址:https://github.com/xd-tayde/blog/blob/master/html5-touch-math.md
再推荐个强大的手势库: Hammer.js。