1. 程式人生 > >網頁小實驗——用canvas生成精靈動畫圖片

網頁小實驗——用canvas生成精靈動畫圖片

實驗目標:藉助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);
View Code

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版又有了很多新改變,也許要再次開始文件翻譯工作了)

&n