利用 canvas 与 setinterval() 实现动态视觉效果
1、创建新文件，初始化尺寸为 400×400 的 canvas 元素，并在页面中引入外部 JavaScript 文件。
2、通过 JavaScript 获取该 canvas 对象及其 2D 渲染上下文（context）。
3、在画布上绘制一个边长为 10 像素的实心正方形。
4、使用 setInterval() 方法设定定时任务，控制图形随时间变化，时间间隔设为指定毫秒值。
5、最终呈现的动态效果如下所示：
6、修改变量 i 的初始值及递增逻辑，以改变运动起始位置或方向。
7、调整后的新动画表现如下：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
8、使动画从左右两端同步启动，形成对称移动效果。
9、对应的实际运行效果如下：
10、将动画起点设定为画布四个角的交汇中心点（即坐标原点偏移至中心）。
11、此时动画从画面中央向外扩散，效果示意如下：
12、附：完整 JavaScript 源代码
13、}
14、}
