如何使用canvas实现动画效果

前言

Canvas是用来绘制图形的，可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

刚好最近看了一些Canvas的小游戏实例，简单总结一下Canvas 的实现步骤，供大家参考借鉴。

实现步骤

具体的实现步骤如下：

一、创建绘制函数 （drawFunction）clearRect(x, y, width, height)；在给定的矩形内清除指定的像素。清空或覆盖画布，即重置上一帧的内容。通常将属性 fillStlyle 设置为画布背景色，如 white。fillRect(x, y, width, height) ；填充背景色矩形，用于制造视觉暂留效果。save();保存初始状态到栈， 属性、变形和裁剪的初始值被保存。绘制图形。绘制路径。设置属性、变形或裁剪。描边或填充，绘制完当前帧的所有画面。restore() 从栈弹出并恢复初始状态，重置属性、变形和裁剪到初始值，不影响下一帧。

二、调用重绘方法

定时调用

1、周期性调用绘制函数
setInterval(drawFunction, delay, [arg1, arg2, …]) 调用绘制函数

2、chrome.alarms
配置 chrome.alarms.create 的 periodInMinutes 参数，生产环境 >= 1 分钟
chrome.alarms.onAlarm.adListener
通过 ​​​alarm.name​​ 在第一步设置的 alarm 被触发时

3、调用绘制函数
在绘制函数内部，一定时间后，重复调用自身
setTimeout(drawFunction[, delay, arg1, arg2, …])
window.requestAnimationFrame(drawFunction)

事件驱动：监听鼠标、键盘、触摸等事件，当事件被触发时，调用绘制函数，常用于游戏、VR 等。

小结

Canvas 的动画通过重绘实现，每次重绘相当于创建动画的一帧，以小于 0.1s 的时间间隔重绘，访客就可以看到连续的动画效果。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！