如何用canvas制作精灵动画效果？
摘要：实验目标：借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片，不借助其他图片处理工具，不引用其他库只使用原生js实现。 初始图片如下： 一、图片分割 将初始图片分割为六张大小相同的棋子图片 1、html舞台：
实验目标：借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片，不借助其他图片处理工具，不引用其他库只使用原生js实现。
初始图片如下：
一、图片分割
将初始图片分割为六张大小相同的棋子图片
1、html舞台：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>处理棋子图片</title>
6 </head>
7 <body>
8 <canvas id="can_source" style="z-index: 1;top:2px;left:2px;position: absolute"></canvas><!--显示原图的画布-->
9 <canvas id="can_mask" style="z-index: 10;top:2px;left:2px;position: absolute"></canvas><!--显示操作范围提示的画布-->
10 <canvas id="can_maskbak" style="z-index: 1;top:2px;left:2px;position: absolute"></canvas><!--用来划分区域的背景画布-->
11 </body>
12 <script><!--主体代码-->
13 </script>
14 </html>
这里准备了三张canvas画布，其中can_source是预览原图的画布，称为“源画布”；can_mask是悬浮在can_source上层的透明背景画布，用来绘制切割范围提示，称为“提示画布”；can_maskbak用来圈定切割范围（其实可以不显示它），称为“范围画布”。