知行社的前端早读课 第5期

为什么海水这么咸？还不是因为你们这些城市人边游泳边小便！！

《插件推荐：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。