网页小实验——用canvas生成精灵动画图片
ljzc002 人气:0实验目标：借助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用来圈定切割范围（其实可以不显示它），称为“范围画布”。
2、分割流程：
1 var can_source=document.getElementById("can_source");
2 var can_mask=document.getElementById("can_mask");
3 var can_maskbak=document.getElementById("can_maskbak");
4 var top_res;
5 var width=0,height=0;
6 window.onload=function(){
7 var img=new Image();
8 img.src="../../ASSETS/IMAGE/ICON/chesses.jpg";
9 img.onload=function(){
10 width=img.width;//根据图片尺寸设置画布尺寸
11 height=img.height;
12 can_source.style.width=width+"px";//css尺寸
13 can_source.style.height=height+"px";
14 can_source.width=width;//canvas像素尺寸
15 can_source.height=height;
16 var con_source=can_source.getContext("2d");
17 con_source.drawImage(img,0,0);//显示原图
18
19 top_res=height+4+"px";
20 can_maskbak.style.left=width+4+"px";//把这个圈定范围的画布放在右边，做对比
21 can_maskbak.style.width=width+"px";
22 can_maskbak.style.height=height+"px";
23 can_maskbak.width=width;
24 can_maskbak.height=height;
25 var con_maskbak=can_maskbak.getContext("2d");
26 con_maskbak.fillStyle="rgba(0,0,0,1)";//填充完全不透明的黑色
27 con_maskbak.fillRect(0,0,width,height);
28
29 can_mask.style.width=width+"px";
30 can_mask.style.height=height+"px";
31 can_mask.width=width;
32 can_mask.height=height;
33 var con_mask=can_mask.getContext("2d");
34 con_mask.fillStyle="rgba(0,0,0,0)";
35 con_mask.fillRect(0,0,width,height);
36 //下面是具体的操作代码
37 //cutRect(40,10,120,240,256,256);//矩形切割
38 //cutRect(192,10,120,240,256,256);
39 //cutRect(340,10,120,240,256,256);
40 cutRect(33,241,120,240,256,256);
41 cutRect(200,241,120,240,256,256);
42 cutRect(353,241,120,240,256,256);
43 }
44 }
3、具体切割算法：
1 //从一个画布上下文中剪切一块dataUrl
2 function cutRect(x,y,wid,hig,wid2,hig2)
3 {
4 //将矩形转换为路径，然后用更一般化的路径方法处理区域
5 var path=[{x:x,y:y},{x:x+wid,y:y},{x:x+wid,y:y+hig},{x:x,y:y+hig}];
6 var framearea=[x,y,wid,hig];//framearea是操作范围的边界，矩形切割则直接是矩形本身，多边形切割则应是多边形的外切矩形范围
7 cutPath(path,framearea,wid2,hig2);
8
9 }
10 function cutPath(path,framearea,wid2,hig2)
11 {
12 var len=path.length;
13 var con_mask=can_mask.getContext("2d");
14 con_mask.strokeStyle="rgba(160,197,232,1)";//线框
15 con_mask.beginPath();
16 for(var i=0;i<len;i++)
17 {
18 var point=path[i];
19 if(i==0)
20 {
21 con_mask.moveTo(point.x,point.y);
22 }
23 else {
24 con_mask.lineTo(point.x,point.y);
25 }
26
27 }
28 con_mask.closePath();//在提示画布中绘制提示框
29 con_mask.stroke();
30 //con_mask.Path;
31
32
33 var con_maskbak=can_maskbak.getContext("2d");
34 con_maskbak.beginPath();
35 con_maskbak.fillStyle="rgba(0,255,0,1)";
36 con_maskbak.lineWidth=0;
37 for(var i=0;i<len;i++)
38 {
39 var point=path[i];
40 con_maskbak.lineTo(point.x,point.y);
41 }
42 con_maskbak.closePath();
43 con_maskbak.fill();//在范围画布中画出切割的范围（纯绿色）
44
45 var con_source=can_source.getContext("2d");
46 var data_source=con_source.getImageData(framearea[0],framearea[1],framearea[2],framearea[3]);//获取源画布在操作范围内的像素
47 var data_maskbak=con_maskbak.getImageData(framearea[0],framearea[1],framearea[2],framearea[3]);//获取范围画布在操作范围内的像素
48
49 var can_temp=document.createElement("canvas");//建立一个暂存canvas作为工具，并不实际显示它。
50 can_temp.width=wid2||framearea[2];//设置暂存画布的尺寸，这里要把长方形的切图保存为正方形！
51 can_temp.height=hig2||framearea[3];
52 var con_temp=can_temp.getContext("2d");
53 con_temp.fillStyle="rgba(255,255,255,1)";
54 con_temp.fillRect(0,0,can_temp.width,can_temp.height);
55 var data_res=con_temp.createImageData(framearea[2],framearea[3]);//建立暂存画布大小的像素数据
56
57
58 var len=data_maskbak.data.length;
59 for(var i=0;i<len;i+=4)//对于范围画布的每一个像素
60 {
61 if(data_maskbak.data[i+1]=255)//如果这个像素是绿色
62 {
63 data_res.data[i]=(data_source.data[i]);//则填充源画布的对应像素
64 data_res.data[i+1]=(data_source.data[i+1]);
65 data_res.data[i+2]=(data_source.data[i+2]);
66 data_res.data[i+3]=(data_source.data[i+3]);
67 }
68 else
69 {
70 data_res.data[i]=(255);//否则填充完全不透明的白色，注意不透明度通道在rgba表示中是0到1，在data表示中是0到255！
71 data_res.data[i+1]=(255);
72 data_res.data[i+2]=(255);
73 data_res.data[i+3]=(255);
74 }
75 }
76 con_temp.putImageData(data_res,(can_temp.width-framearea[2])/2,(can_temp.height-framearea[3])/2)//把填充完毕的像素数据放置在暂存画布的中间
77 console.log(can_temp.toDataURL());//以dataUrl方式输出暂存画布的数据
78
79 }
4、切割效果如下：
在控制台里可以找到以文本方式输出的图片数据：
对于小于2MB的图片数据，直接复制dataUrl粘贴到浏览器地址栏回车，即可显示完整图片，之后右键保存；对于大于2MB的图片数据则需把can_temp显示出来，之后右键保存。精灵动画的单帧图片一般较小，所以不考虑需要显示can_temp的情况。
最终获取的一张“兵”图片：
5、改进
其实canvas的path对象本身就有clip方法，可以用这个内置方法简化以上过程。
clip方法的文档：https://www.w3school.com.cn/tags/canvas_clip.asp
二、生成精灵动画
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_back" style="z-index: 1;top:2px;left:2px;position: absolute"></canvas><!--徽章的背景-->
9 <canvas id="can_back2" style="z-index: 1;top:2px;left:2px;position: absolute"></canvas>
10 <canvas id="can_res" style="z-index: 1;top:2px;left:2px;position: absolute"></canvas><!--显示结果-->
11 </body>
12 <script>
13 var can_back=document.getElementById("can_back");
14 var can_back2=document.getElementById("can_back2");
15 var can_res=document.getElementById("can_res");
16 var width=240,height=360;
17 window.onload=function(){
18 console.log("程序开始")
19 can_back.style.width=width+"px";
20 can_back.width=width;
21 can_back.style.height=height+"px";
22 can_back.height=height;
23 can_back2.style.width=width+"px";
24 can_back2.width=width;
25 can_back2.style.height=height+"px";
26 can_back2.height=height;
27 can_back2.style.left=width+4+"px";
28 can_res.style.top=height+4+"px";
29 var img=new Image();
30 img.src="../../ASSETS/IMAGE/ICON/bing.png";//256*256的图片
31 img.onload=function(){//动画帧生成代码
32 }
33 </script>
34 </html>
2、在can_back中为棋子添加“徽章”背景
添加后效果如下：
为棋子添加了一个形状和颜色渐变的徽章背景，徽章外为透明色，可以根据棋子所属的势力为徽章设置不同的主色调。算法首先判断can_back的像素点是否在棋子“兵”内，如果在棋子内则原样呈现，否则根据像素的位置计算像素的颜色，一种实现方法如下：
1 var con_back=can_back.getContext("2d");
2 con_back.fillStyle="rgba(0,255,0,0)";
3 con_back.fillRect(0,0,width,height);
4 con_back.drawImage(img,(width-256)/2,(height-256)/2)
5
6 var data_back=con_back.getImageData(0,0,width,height);
7 //var len=data_back.length;
8 var r1=22/19;
9 var r2=22/51;
10 var p_light=255;//背景强度
11 var i_min=0,i_max=0;
12 //一行一行地处理像素
13 var data=data_back.data;
14 for(var i=0;i<360;i++)
15 {
16 var num_w=(Math.pow(110*110-(i-100)*(i-100)*r2*r2,0.5));
17 for(var j=0;j<240;j++)//对于这一行里的每一个像素
18 {
19 var index=(i*240+j)*4;
20 if(i<5||i>355)
21 {
22 data[index]=0;
23 data[index+1]=255;
24 data[index+2]=0;
25 data[index+3]=0;
26 }
27 else
28 {
29
30 if(i<100)
31 {
32 if(Math.abs(j-119.5)<((i-5)*r1))
33 {
34 if(data[index]+data[index+1]+data[index+2]>600||data[index+3]==0)//不是黑色或者完全透明
35 {
36 var b=127+128*(95-(i-5))/95;//保持红色为主色调
37 var b2=(p_light-b)/2;
38 data[index]=b;
39 data[index+1]=b2;
40 data[index+2]=b2;
41 data[index+3]=255;
42 }
43 else
44 {
45 data[index]=0;
46 data[index+1]=0;
47 data[index+2]=0;
48 data[index+3]=255;
49 if(i_min==0)
50 {
51 i_min=i;
52 i_max=i;
53 }
54 else
55 {
56 if(i>i_max)
57 {
58 i_max=i;
59 }
60 }
61 }
62 }
63 else
64 {
65 data[index]=0;
66 data[index+1]=255;
67 data[index+2]=0;
68 data[index+3]=0;
69 }
70 }
71 else
72 {
73 //if(Math.abs(j-119.5)<Math.pow((355-i),0.5)*r2)
74 if(Math.abs(j-119.5)<num_w)
75 {
76 if(data[index]+data[index+1]+data[index+2]>600||data[index+3]==0)//不是黑色
77 {
78 var b=127+128*(255-(355-i))/255;
79 var b2=(p_light-b)/2;
80 data[index]=b;
81 data[index+1]=b2;
82 data[index+2]=b2;
83 data[index+3]=255;
84 }
85 else
86 {
87 data[index]=0;
88 data[index+1]=0;
89 data[index+2]=0;
90 data[index+3]=255;
91 if(i_min==0)
92 {
93 i_min=i;
94 i_max=i;
95 }
96 else
97 {
98 if(i>i_max)
99 {
100 i_max=i;
101 }
102 }
103 }
104 }
105 else
106 {
107 data[index]=0;
108 data[index+1]=255;
109 data[index+2]=0;
110 data[index+3]=0;
111 }
112 }
113 }
114 }
115 }
116 con_back.putImageData(data_back,0,0);
3、在can_back2为徽章中的棋子描边
为后面的环节做准备，给棋子的轮廓描一层rgb(1,1,1)颜色、2px宽度的边
1 var size_border=2;
2 var rgb_border={r:1,g:1,b:1};
3 if(size_border>0)//为前景和背景的边界描边的算法？
4 {//-》为特定的两种颜色边界描边的算法！！！！
5 console.log("开始描绘边界");
6 drawBorder(data,240,360,isColorOut,isColorIn,Math.floor(size_border/2),size_border,rgb_border);
7 }//参数：像素数据，宽度，高度，判断像素在描边内测的条件，判断像素在描边外侧的条件，描边的偏移，边宽，描边的颜色
8 var con_back2=can_back2.getContext("2d");
9 con_back2.putImageData(data_back,0,0);
描边函数：
1 function isColorOut(rgba)
2 {
3 if(rgba.r>127)
4 {
5 return true;
6 }
7 return false;
8 }
9 function isColorIn(rgba)
10 {
11 if(rgba.r==0&&rgba.g==0&&rgba.b==0)
12 {
13 return true;
14 }
15 return false;
16 }
17 //参数：像素数据,图片的宽度，图片的高度,”外部“的颜色（可以有多种），“内部的颜色”（可以有多种,但不应与arr_rgba1重复！！）
18 // ，决定把边画在内部还是外部的偏移（默认为0，画在中间？为正表示向内偏），边的宽度，边的颜色（认为完全不透明）
19 //使用xy的垂直遍历方法，另一种思路是让计算核沿着分界线移动《-绘制的更为平滑
20 //function drawBorder(data,width,height,arr_rgbaout,arr_rgbain,offset_inout,size_border,rgb_border)
21 //内外的颜色可能是渐变的！！所以在这里用返回布尔值的函数做参数！！！！而非固定颜色范围
22 function drawBorder(data,width,height,func_out,func_in,offset_inout,size_border,rgb_border)
23 {
24 //首先对于每一行像素
25 for(var i=0;i<height;i++)
26 {
27 var lastRGBA={};
28 for(var j=0;j<width;j++)
29 {
30 var index=(i*240+j)*4;
31 var RGBA={r:data[index],g:data[index+1],b:data[index+2],a:data[index+3]};
32 //if(!lastRGBA.r&&lastRGBA.r!=0)//如果是第一个像素
33 if(j==0)
34 {
35 lastRGBA=RGBA;//上一颜色
36 continue;
37 }
38 else
39 {
40 //if(isRGBAinArr(arr_rgbaout,lastRGBA)&&isRGBAinArr(arr_rgbain,RGBA))//在内外颜色的分界处(左侧)
41 if(func_out(lastRGBA)&&func_in(RGBA))//如果上一颜色应该在描边的外侧，同时当前颜色在描边的内侧
42 {
43 var os_left=Math.floor(size_border/2);//偏右
44 var os_right=size_border-os_left;
45 var j_left=j-os_left;
46 var j_right=j+os_right;
47 j_left+=offset_inout;
48 j_right+=offset_inout;
49 for(var k=j_left;k<j_right;k++)//修正偏右
50 {
51 if(k>=0&&k<width)
52 {
53 var index2=(i*240+k)*4;
54 data[index2]=rgb_border.r;
55 data[index2+1]=rgb_border.g;
56 data[index2+2]=rgb_border.b;
57 data[index2+3]=255;
58 }
59
60 }
61 }
62 //else if(isRGBAinArr(arr_rgbaout,RGBA)&&isRGBAinArr(arr_rgbain,lastRGBA))//在内外颜色的分界处(右侧)
63 else if(func_out(RGBA)&&func_in(lastRGBA))
64 {
65 var os_right=Math.floor(size_border/2);//偏左
66 var os_left=size_border-os_right;
67 var j_left=j-os_left;
68 var j_right=j+os_right;
69 j_left-=offset_inout;
70 j_right-=offset_inout;
71 for(var k=j_left+1;k<=j_right;k++)//修正偏左
72 {
73 if(k>=0&&k<width)
74 {
75 var index2 = (i * 240 + k) * 4;
76 data[index2] = rgb_border.r;
77 data[index2 + 1] = rgb_border.g;
78 data[index2 + 2] = rgb_border.b;
79 data[index2 + 3] = 255;
80 }
81 }
82 }
83 }
84 lastRGBA=RGBA;
85 }
86
87 }
88 //然后对于每一列像素
89 for(var i=0;i<width;i++)
90 {
91 var lastRGBA={};
92 for(var j=0;j<height;j++)//对于这一列中的每个像素
93 {
94 var index=(j*240+i)*4;
95 var RGBA={r:data[index],g:data[index+1],b:data[index+2],a:data[index+3]};
96 //if(!lastRGBA.r&&lastRGBA.r!=0)//如果是第一个像素
97 if(j==0)
98 {
99 lastRGBA=RGBA;
100 continue;
101 }
102 else
103 {
104 //if(isRGBAinArr(arr_rgbaout,lastRGBA)&&isRGBAinArr(arr_rgbain,RGBA))//在内外颜色的分界处(左侧)
105 if(func_out(lastRGBA)&&func_in(RGBA))
106 {
107 var os_up=Math.floor(size_border/2);//偏下
108 var os_down=size_border-os_up;
109 var j_up=j-os_down;
110 var j_down=j+os_right;
111 j_up+=offset_inout;
112 j_down+=offset_inout;
113 for(var k=j_up;k<j_down;k++)//不修正偏下
114 {
115 if(k>=0&&k<height)
116 {
117 var index2=(k*240+i)*4;
118 data[index2]=rgb_border.r;
119 data[index2+1]=rgb_border.g;
120 data[index2+2]=rgb_border.b;
121 data[index2+3]=255;
122 }
123
124 }
125 }
126 //else if(isRGBAinArr(arr_rgbaout,RGBA)&&isRGBAinArr(arr_rgbain,lastRGBA))//在内外颜色的分界处(右侧)
127 else if(func_out(RGBA)&&func_in(lastRGBA))
128 {//下面应该是忘了改变量名
129 var os_right=Math.floor(size_border/2);//偏左
130 var os_left=size_border-os_right;
131 var j_left=j-os_left;
132 var j_right=j+os_right;
133 j_left-=offset_inout;
134 j_right-=offset_inout;
135 for(var k=j_left;k<j_right;k++)//修正偏左
136 {
137 if(k>=0&&k<height)
138 {
139 var index2 = (k * 240 + i) * 4;
140 data[index2] = rgb_border.r;
141 data[index2 + 1] = rgb_border.g;
142 data[index2 + 2] = rgb_border.b;
143 data[index2 + 3] = 255;
144 }
145 }
146 }
147 }
148 lastRGBA=RGBA;
149 }
150
151 }
152 }
这里横竖遍历所有像素，在棋子轮廓内外边界处绘制描边，算法细节可能较难以想象，建议亲自调试实验。使用这种方法绘制的描边可能比较粗糙。
4、为棋子建立不同状态的动画帧
这里以生命值变化为例：
用棋子“填充度”的降低表示棋子生命值的减少，图像生成算法如下：
1 console.log("开始生成健康状态图片");
2 /*关于边界，因为纵向体现状态比例，所以最上边和最下边是必然存在的，用最上边和最下边之间的区域分割状态比例
3 ，然后再根据边框宽度画其他的普通边，考虑到空洞的情况，纵向和横向的普通边数量是不确定的
4 -》描边的操作应该在前一步进行！！？？*/
5
6 i_min+=size_border;
7 i_max-=size_border;
8 var i_height=i_max-i_min;
9 //接下来把它画在1800*1800的图片上（设为2048*2048可能获得更高性能和清晰度，但要求每个单元图片尺寸也必须是2的整数次幂，比如256*256），分为横5竖5最多25个状态
10 /*can_res.style.width=2048+"px";
11 can_res.width=2048;
12 can_res.style.height=2048+"px";
13 can_res.height=2048;*/
14 can_res.style.width=1800+"px";
15 can_res.width=1800;
16 can_res.style.height=1800+"px";
17 can_res.height=1800;
18 var con_res=can_res.getContext("2d");
19 //return;
20 //var data=data_back.data;
21 for(var h=10;h>=0;h--)//健康度状态分十一个阶段递减
22 {
23 console.log("生成"+h+"/"+10+"的图片")
24 var int_x=Math.floor((10-h)%5);
25 var int_y=Math.floor((10-h)/5);
26 if(h==10)
27 {
28 con_res.putImageData(data_back,int_x*360+60,int_y*360);
29 }
30 else
31 {
32 var i_up=Math.floor(i_max-i_height*((h+1)/10));//i偏低，取像素整体偏上
33 var i_down=Math.floor(i_max-i_height*((h)/10)+1);
34 for(var i=i_up;i<i_down;i++)//对于每一行像素
35 {
36 var j_left=0,j_right=0;
37 for(var j=0;j<240;j++)
38 {
39 var index=(i*240+j)*4;
40 if(data[index]==0&&data[index+1]==0&&data[index+2]==0)
41 {
42 if(j_left==0)
43 {
44 j_left=j;
45 data[index]=0;
46 data[index+1]=255;
47 data[index+2]=0;
48 data[index+3]=0;//将像素不透明度设为0
49 }
50 else
51 {
52 data[index]=0;
53 data[index+1]=255;
54 data[index+2]=0;
55 data[index+3]=0;
56 j_right=j;
57 }
58 }
59 }
60 /*if(j_right>0)
61 {
62 var index=(i*240+j_right)*4;
63 data[index]=0;
64 data[index+1]=0;
65 data[index+2]=0;
66 data[index+3]=255;
67 }*/
68
69
70 }
71 //描边
72
73 con_res.putImageData(data_back,int_x*360+60,int_y*360);
74 //putImageData时完全透明的rgb通道将被丢弃？？！！
75 }
76
77
78 }
5、添加“被破坏”动画帧
实现思路是在棋子上绘制不断增大的透明圆表示棋子的消逝，需要注意的是因为谷歌浏览器无法精确处理半透明计算，所以考虑到以后可能需要绘制半透明的“消逝圆”的情况，先用不透明绿色绘制消逝圆，然后统一把绿色替换为具有精确透明度的颜色。实现代码如下：
1 //接下来添加5帧栅格式的退出动画
2 for(var h=1;h<=5;h++)
3 {
4 var int_x=Math.floor((10+h)%5);
5 var int_y=Math.floor((10+h)/5);
6 con_res.putImageData(data_back,int_x*360+60,int_y*360);
7 con_res.fillStyle="rgba(0,255,0,1)";//考虑到对半透明的检查，在show图片时可以先绘制一个绿屏背景！！
8 con_res.lineWidth=0;
9 for(var i=0;i<4;i++)
10 {
11 for(var j=0;j<6;j++)
12 {
13 con_res.beginPath();
14 con_res.arc(int_x*360+60+30+i*60,int_y*360+30+j*60,6*h,0,Math.PI*2);
15 con_res.fill();//这个方法不能正常呈现a通道
16 }
17
18 }
19 }
20 //将绿幕换成透明
21
22 var data_res=con_res.getImageData(0,0,1800,1800);//
23 var len=1800*1800*4;
24 var datar=data_res.data;
25 for(var i=0;i<len;i+=4)
26 {//这个循环内加断点会导致运算超时
27 if(datar[i]==0&&datar[i+1]==255&&datar[i+2]==0)
28 {
29 datar[i+1]=0;
30 datar[i+3]=0;
31 }
32 }
33 con_res.putImageData(data_res,0,0);
6、使用
经过前面的操作我们得到了棋子“兵”的精灵动画图片：
使用相同方法，我们可以得到其他五种棋子的精灵动画图片，或者添加更多的精灵动画帧。我们可以在Babylon.js之类WebGL引擎中使用这些精灵动画图片创建精灵动画，可以在这里找到Babylon.js的精灵动画文档：旧版文档：https://ljzc002.github.io/BABYLON101/14Sprites%20-%20Babylon.js%20Documentation.htm，新版文档：https://doc.babylonjs.com/divingDeeper/sprites/sprite_map_animations。（4.2版又有了很多新改变，也许要再次开始文档翻译工作了）
加载全部内容