如何使用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 的时间间隔重绘,访客就可以看到连续的动画效果。

发表评论

相关文章