如何将canvas轨迹保存为动画

Posted 2023-04-06

具体的实现步骤如下：

一、创建绘制函数 （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) 参考技术A 一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。

如果用canvas来绘制，其中的难点在于：

需要计算子路径，这块计算比较复杂。（当然是可以实现的）
渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。 参考技术B 要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。

如果用canvas来绘制，其中的难点在于：

需要计算子路径，这块计算比较复杂。（当然是可以实现的）
渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。

Canvas 动画原理与 fabric 实现

本章节内容主要关注如何在 Canvas 中绘制动画效果。在 HTML5 的 Canvas 中结合 JS 可以绘制雪碧图动画，动画在一些 H5 游戏中或者富交互的应用中被广泛使用。游戏的动画帧可以在一个单独的图片中保存，然后使用 HTML5 的 Canvas 结合 JS 在特定的时间点来绘制特定的内容。本章节将详解 HTML5 Canvas 的雪碧图动画原理，并在文章的末尾将雪碧图动画应用于简单的 HTML5 应用中。

1.绘制 Canvas 雪碧图动画

1.1 Canvas 雪碧图

二维的基于帧的动画可以在 HTML5 的 Canvas 中使用，其原理是在指定的时间间隔将一个单独的图片绘制在一个指定的区域。前面章节讲述过通过 drawImage 方法可将像素源锁定在某一张图片的特定位置，而这特定的位置就被叫做雪碧图区域(sprite sheet)。比如下面这种图的每一个数字区域就是一个独立的雪碧图区域。

通过该图即可绘制出雪碧图动画:

其实 HTML5 的 Canvas 动画雪碧图区域和 CSS 的雪碧图原理是一样的。雪碧图就是在一个图片中包含多个帧的数据。比如下面的雪碧图包含了 10 帧，图片的总宽度是 460px，因此，每一帧的宽度是 460/10，即 46px。