实验目标：借助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>