canvas动画篇

转自博客原文连接：https://tong-h.github.io/2019/03/18/canvas-3/#more

最近工作上用canvas蛮多的，发现canvas写动画也蛮好使的

canvas 由 js 来控制，但用 js 写动画通常3种方法控制时间

• setInterval( function, delay ) 在指定的毫秒数下循环调用函数或表达式，直到使用clearInterval清除

• setTimeout( function, delay ) 在指定的毫秒数后调用函数或计算表达式

前两个是平时会用得会比较多的，setInterval 和 setTimeout的本质是将回调函数添加到任务队列的尾部等待执行，但是前面的任务到底需要多少时间执行完是不确定的，如果前面堵塞了那么后面就无法执行
尤其setInterval指定的是"开始执行"之间的间隔，并不考虑每次任务执行本身所消耗的时间，下一个回调开始执行的时间 = 指定时间 - 回调函数执行的时间，因此实际上，两次执行之间的间隔会小于指定的时间

下面的写法可以确保执行时间始终是2000ms

var timer = setTimeout(function f() {
  // ...
  timer = setTimeout(f, 2000);
}, 2000)

• window.requestAnimationFrame(callback) 和 window.requestAnimationFrame(requestID)
  前者是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，返回一个 requestID，该回调会在浏览器下一次重绘之前执行
  后者是取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求，接受一个 requestID，不需要的时候就取消掉释放内存绝对是个好习惯

显示器刷新频率是60Hz，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms
requestAnimationFrame就是根据显示器刷新频率来的，这是浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，节省系统资源，提高系统性能，如果页面不是激活状态下的话，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命

一些canvas的小例子

自己学习过程中用canvas写的一些小东西，源码带有注解给大家参考，会坚持不断更新这个目录....

环形百分比动画

示例图片

粒子动画

示例图片

电子画板

示例图片

图片裁剪

示例图片

本站和canvas有关的文章

cannvas的imagedata对象

参考文章

https://www.w3cplus.com/javascript/requestAnimationFrame.html © w3cplus.com
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
https://javascript.ruanyifeng.com/advanced/timer.html