一、HTML5學習總結——canvas繪制象棋

1、第一次：canvas繪制象棋（笨方法）示例代碼

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>canvas繪圖_象棋棋盤</title>
  7     </head>
  8 
  9     <body>
 10         <canvas id="canvas1" width="805" height="905">不支持Canvas</canvas>
 11         <script type="text/javascript">
 12             //棋盤外框
 13             var canvas1 = document.getElementById("canvas1");
 14             var ctx = canvas1.getContext("2d");
 15             ctx.lineWidth = 5;
 16             ctx.strokeStyle = "brown";
 17             ctx.strokeRect(3, 3, 800, 900)
 18                 //此方法用來畫棋盤線
 19             function LineDrawing(mx, my, lx, ly) {
 20                 ctx.beginPath();
 21                 ctx.moveTo(mx, my);
 22                 ctx.lineTo(lx, ly);
 23                 ctx.stroke();
 24             };
 25             //棋盤列上半部分
 26             ctx.lineWidth = 2;
 27             LineDrawing(100, 5, 100, 400);
 28             LineDrawing(200, 5, 200, 400);
 29             LineDrawing(300, 5, 300, 400);
 30             //斜線
 31             LineDrawing(300, 5, 500, 200);
 32             LineDrawing(400, 5, 400, 400);
 33             LineDrawing(500, 5, 500, 400);
 34             //反斜線
 35             LineDrawing(500, 5, 300, 200);
 36             LineDrawing(600, 5, 600, 400);
 37             LineDrawing(700, 5, 700, 400);
 38             LineDrawing(100, 5, 100, 400);
 39             LineDrawing(100, 5, 100, 400);
 40 
 41             //棋盤列下半部分
 42             LineDrawing(100, 500, 100, 900);
 43             LineDrawing(200, 500, 200, 900);
 44             LineDrawing(300, 500, 300, 900);
 45             //斜線
 46             LineDrawing(300, 900, 500, 700);
 47             LineDrawing(400, 500, 400, 900);
 48             LineDrawing(500, 500, 500, 900);
 49             //反斜線
 50             LineDrawing(500, 900, 300, 700);
 51             LineDrawing(600, 500, 600, 900);
 52             LineDrawing(700, 500, 700, 900);
 53             //棋盤行
 54             LineDrawing(5, 100, 800, 100);
 55             LineDrawing(5, 200, 800, 200);
 56             LineDrawing(5, 300, 800, 300);
 57             LineDrawing(5, 400, 800, 400);
 58             LineDrawing(5, 500, 800, 500);
 59             LineDrawing(5, 600, 800, 600);
 60             LineDrawing(5, 700, 800, 700);
 61             LineDrawing(5, 800, 800, 800);
 62 
 63             //中心點一（100,200）
 64             //左上
 65             LineDrawing(90, 170, 90, 190);
 66             LineDrawing(90, 190, 70, 190);
 67             //右上
 68             LineDrawing(110, 170, 110, 190);
 69             LineDrawing(110, 190, 130, 190);
 70             //左下
 71             LineDrawing(90, 230, 90, 210);
 72             LineDrawing(90, 210, 70, 210);
 73             //右下
 74             LineDrawing(110, 230, 110, 210);
 75             LineDrawing(110, 210, 130, 210);
 76             //中心點二（700,200）
 77             //左上
 78             LineDrawing(690, 170, 690, 190);
 79             LineDrawing(690, 190, 670, 190);
 80             //右上
 81             LineDrawing(710, 170, 710, 190);
 82             LineDrawing(710, 190, 730, 190);
 83             //左下
 84             LineDrawing(690, 230, 690, 210);
 85             LineDrawing(690, 210, 670, 210);
 86             //右下
 87             LineDrawing(710, 230, 710, 210);
 88             LineDrawing(710, 210, 730, 210);
 89             //中心點三（0,300）
 90             //右上
 91             LineDrawing(20, 270, 20, 290);
 92             LineDrawing(20, 290, 40, 290);
 93             //右下
 94             LineDrawing(20, 330, 20, 310);
 95             LineDrawing(20, 310, 40, 310);
 96             //中心點四（200,300）
 97             //左上
 98             LineDrawing(190, 270, 190, 290);
 99             LineDrawing(190, 290, 170, 290);
100             //右上
101             LineDrawing(210, 270, 210, 290);
102             LineDrawing(210, 290, 230, 290);
103             //左下
104             LineDrawing(190, 330, 190, 310);
105             LineDrawing(190, 310, 170, 310);
106             //右下
107             LineDrawing(210, 330, 210, 310);
108             LineDrawing(210, 310, 230, 310);
109             //中心點五（400,300）
110             //左上
111             LineDrawing(390, 270, 390, 290);
112             LineDrawing(390, 290, 370, 290);
113             //右上
114             LineDrawing(410, 270, 410, 290);
115             LineDrawing(410, 290, 430, 290);
116             //左下
117             LineDrawing(390, 330, 390, 310);
118             LineDrawing(390, 310, 370, 310);
119             //右下
120             LineDrawing(410, 330, 410, 310);
121             LineDrawing(410, 310, 430, 310);
122             //中心點六（600,300）
123             //左上
124             LineDrawing(590, 270, 590, 290);
125             LineDrawing(590, 290, 570, 290);
126             //右上
127             LineDrawing(610, 270, 610, 290);
128             LineDrawing(610, 290, 630, 290);
129             //左下
130             LineDrawing(590, 330, 590, 310);
131             LineDrawing(590, 310, 570, 310);
132             //右下
133             LineDrawing(610, 330, 610, 310);
134             LineDrawing(610, 310, 630, 310);
135             //中心點七（800,300）
136             //左上
137             LineDrawing(790, 270, 790, 290);
138             LineDrawing(790, 290, 770, 290);
139             //左下
140             LineDrawing(790, 330, 790, 310);
141             LineDrawing(790, 310, 770, 310);
142             //中心點八——對應中心點七（800,600）
143             //左上
144             LineDrawing(790, 570, 790, 590);
145             LineDrawing(790, 590, 770, 590);
146             //左下
147             LineDrawing(790, 630, 790, 610);
148             LineDrawing(790, 610, 770, 610);
149             //中心點九——對應中心點六（600,600）
150             //左上
151             LineDrawing(590, 570, 590, 590);
152             LineDrawing(590, 590, 570, 590);
153             //右上
154             LineDrawing(610, 570, 610, 590);
155             LineDrawing(610, 590, 630, 590);
156             //左下
157             LineDrawing(590, 630, 590, 610);
158             LineDrawing(590, 610, 570, 610);
159             //右下
160             LineDrawing(610, 630, 610, 610);
161             LineDrawing(610, 610, 630, 610);
162             //中心點十——對應中心點五（400,600）
163             //左上
164             LineDrawing(390, 570, 390, 590);
165             LineDrawing(390, 590, 370, 590);
166             //右上
167             LineDrawing(410, 570, 410, 590);
168             LineDrawing(410, 590, 430, 590);
169             //左下
170             LineDrawing(390, 630, 390, 610);
171             LineDrawing(390, 610, 370, 610);
172             //右下
173             LineDrawing(410, 630, 410, 610);
174             LineDrawing(410, 610, 430, 610);
175             //中心點十一——對應中心點四（200,600）
176             //左上
177             LineDrawing(190, 570, 190, 590);
178             LineDrawing(190, 590, 170, 590);
179             //右上
180             LineDrawing(210, 570, 210, 590);
181             LineDrawing(210, 590, 230, 590);
182             //左下
183             LineDrawing(190, 630, 190, 610);
184             LineDrawing(190, 610, 170, 610);
185             //右下
186             LineDrawing(210, 630, 210, 610);
187             LineDrawing(210, 610, 230, 610);
188             //中心點十二——對應中心點三（0,600）
189             //右上
190             LineDrawing(20, 570, 20, 590);
191             LineDrawing(20, 590, 40, 590);
192             //右下
193             LineDrawing(20, 630, 20, 610);
194             LineDrawing(20, 610, 40, 610);
195             //中心點十三——對應中心點二（700,500）
196             //左上
197             LineDrawing(690, 670, 690, 690);
198             LineDrawing(690, 690, 670, 690);
199             //右上
200             LineDrawing(710, 670, 710, 690);
201             LineDrawing(710, 690, 730, 690);
202             //左下
203             LineDrawing(690, 730, 690, 710);
204             LineDrawing(690, 710, 670, 710);
205             //右下
206             LineDrawing(710, 730, 710, 710);
207             LineDrawing(710, 710, 730, 710);
208             //中心點十四——對應中心點一（100,500）
209             //左上
210             LineDrawing(90, 670, 90, 690);
211             LineDrawing(90, 690, 70, 690);
212             //右上
213             LineDrawing(110, 670, 110, 690);
214             LineDrawing(110, 690, 130, 690);
215             //左下
216             LineDrawing(90, 730, 90, 710);
217             LineDrawing(90, 710, 70, 710);
218             //右下
219             LineDrawing(110, 730, 110, 710);
220             LineDrawing(110, 710, 130, 710);
221             //字體填充：楚河 漢界    
222             //設置線寬
223             ctx.lineWidth = 1;
224             //繪制文字
225             ctx.font = "60px microsoft yahei";
226             ctx.save();//保存點
227             //將坐標中心作為起啟點
228             ctx.translate(canvas1.width / 2, canvas1.height / 2);
229             var radian = Math.PI / 2; // 弧度制
230             ctx.rotate(radian); // 旋轉畫布繪制刻度
231             //填充
232             ctx.fillText("楚", -30, -270);
233             ctx.fillText("河", -30, -150);
234             ctx.restore();//恢復到保存點
235             ctx.save();
236             //將坐標中心作為起啟點
237             ctx.translate(canvas1.width / 2, canvas1.height / 2);
238             var radian = Math.PI / -2; 
239             ctx.rotate(radian); 
240             ctx.fillText("漢", -30, -270);
241             ctx.fillText("界", -30, -150);
242             ctx.restore();
243         </script>
244     </body>
245 </html>

View Code

運行結果：

小結： 剛剛學習了canvas,做了一個簡單的示例，希望能鞏固一下自己所學的知識，從上面的代碼可以看出存在很多不足的地方，比如:代碼冗余,繪制棋盤的方法也不是很好，雖然功能是實現了，但作為一名寫程序的程序員我們要追求完美，不是嗎？，所以我又分析了一下我寫的代碼，發現有很多可以改進的地方比如：繪制棋盤的方法可以用循環來做相對好一些，下面是我的第二次代碼改進。

2、第二次：canvas繪制象棋（改進）示例代碼

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>canvas繪圖_象棋棋盤</title>
  7     </head>
  8 
  9     <body>
 10         <canvas id="canvas1" width="805" height="905">不支持Canvas</canvas>
 11         <script type="text/javascript">
 12             //棋盤外框
 13             var canvas1 = document.getElementById("canvas1");
 14             var ctx = canvas1.getContext("2d");
 15             ctx.lineWidth = 5;
 16             ctx.strokeStyle = "brown";
 17             ctx.strokeRect(3, 3, 800, 900)
 18 
 19             //此方法用來畫棋盤線
 20             function LineDrawing(mx, my, lx, ly) {
 21                 ctx.beginPath();
 22                 ctx.moveTo(mx, my);
 23                 ctx.lineTo(lx, ly);
 24                 ctx.stroke();
 25             };
 26 
 27             //棋盤行
 28             function row() {
 29                 for(var i = 100; i <= 800; i += 100) {
 30                     ctx.beginPath();
 31                     ctx.moveTo(5, i);
 32                     ctx.lineTo(800, i);
 33                     ctx.stroke();
 34                 }
 35             }
 36             row();
 37             //棋盤列
 38             function cols() {
 39                 for(var i = 100; i <= 700; i += 100) {
 40                     ctx.beginPath();
 41                     ctx.moveTo(i, 5);
 42                     ctx.lineTo(i, 900);
 43                     ctx.stroke();
 44                 }
 45                 //清除指定的矩形區域
 46                 ctx.clearRect(5, 402, 795, 95);
 47                 //斜線
 48                 LineDrawing(300, 5, 500, 200);
 49                 LineDrawing(300, 705, 500, 900);
 50                 //反斜線
 51                 LineDrawing(500, 5, 300, 200);
 52                 LineDrawing(500, 705, 300, 900);
 53             }
 54             cols();
 55 
 56             function center(x, y) {
 57                 //中心點一（100,200）
 58                 //左上
 59                 LineDrawing(x - 10, y - 30, x - 10, y - 10);
 60                 LineDrawing(x - 10, y - 10, x - 30, y - 10);
 61                 //右上
 62                 LineDrawing(x + 10, y - 30, x + 10, y - 10);
 63                 LineDrawing(x + 10, y - 10, x + 30, y - 10);
 64                 //左下
 65                 LineDrawing(x - 10, y + 30, x - 10, y + 10);
 66                 LineDrawing(x - 10, y + 10, x - 30, y + 10);
 67                 //右下
 68                 LineDrawing(x + 10, y + 30, x + 10, y + 10);
 69                 LineDrawing(x + 10, y + 10, x + 30, y + 10);
 70             }
 71 
 72             //中心點一（100,200）
 73             center(100, 200);
 74             //中心點二（700,200）
 75             center(700, 200);
 76             //中心點三（5,300）
 77             center(5, 300);
 78             //中心點四（200,300）
 79             center(200, 300);
 80             //中心點五（400,300）
 81             center(400, 300);
 82             //中心點六（600,300）
 83             center(600, 300);
 84             //中心點七（800,300）
 85             center(800, 300);
 86             //中心點八（800,600）
 87             center(800, 600);
 88             //中心點九（600,600）
 89             center(600, 600);
 90             //中心點十（400,600）
 91             center(400, 600);
 92             //中心點十一（200,600）
 93             center(200, 600);
 94             //中心點十二（5,600）
 95             center(5, 600);
 96             //中心點十三（700,700）
 97             center(700, 700);
 98             //中心點十四（100,700）
 99             center(100, 700);
100             //字體填充：楚河 漢界    
101             //設置線寬
102             ctx.lineWidth = 1;
103             //繪制文字
104             ctx.font = "60px microsoft yahei";
105             ctx.save(); //保存點
106             //將坐標中心作為起啟點
107             ctx.translate(canvas1.width / 2, canvas1.height / 2);
108             var radian = Math.PI / 2; // 弧度制
109             ctx.rotate(radian); // 旋轉畫布繪制刻度
110             //填充
111             ctx.fillText("楚", -30, -270);
112             ctx.fillText("河", -30, -150);
113             ctx.restore(); //恢復到保存點
114             ctx.save();
115             //將坐標中心作為起啟點
116             ctx.translate(canvas1.width / 2, canvas1.height / 2);
117             var radian = Math.PI / -2; 
118             ctx.rotate(radian); // 旋轉畫布繪制刻度
119             ctx.fillText("漢", -30, -270);
120             ctx.fillText("界", -30, -150);
121             ctx.restore();
122         </script>
123     </body>
124 
125 </html>

View Code

運行結果：

小結： 經過一番改進，代碼從原來的245行代碼減少到了125行，代碼冗余和方法使用的問題解決了，那么是不是完事了呢？我再次檢查了一下我寫的代碼，發現還是有改進的地方，就是JavaScript腳本寫的比較亂,定義的方法變量都暴露都直接暴露在window下有可能與別的js沖突，可以進行簡單封裝，下面是我的第三次代碼改進。

3、第三次：canvas繪制象棋（封裝JavaScript）示例代碼

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>canvas繪圖_象棋盤</title>
  7     </head>
  8 
  9     <body>
 10         <canvas id="canvas1" width="805" height="905">不支持Canvas</canvas>
 11         <script type="text/javascript">
 12             var object = {
 13                 //初始化
 14                 init: function() {
 15                     //棋盤外框
 16                     var canvas1 = document.getElementById("canvas1");
 17                     this.ctx = canvas1.getContext("2d");
 18                     this.ctx.lineWidth = 5;
 19                     this.ctx.strokeStyle = "brown";
 20                     this.ctx.strokeRect(3, 3, 800, 900);
 21 
 22                     this.row();
 23                     this.cols();
 24                     this.drawFont();
 25                     //中心點一（100,200）
 26                     this.center(100, 200);
 27                     //中心點二（700,200）
 28                     this.center(700, 200);
 29                     //中心點三（5,300）
 30                     this.center(5, 300);
 31                     //中心點四（200,300）
 32                     this.center(200, 300);
 33                     //中心點五（400,300）
 34                     this.center(400, 300);
 35                     //中心點六（600,300）
 36                     this.center(600, 300);
 37                     //中心點七（800,300）
 38                     this.center(800, 300);
 39                     //中心點八（800,600）
 40                     this.center(800, 600);
 41                     //中心點九（600,600）
 42                     this.center(600, 600);
 43                     //中心點十（400,600）
 44                     this.center(400, 600);
 45                     //中心點十一（200,600）
 46                     this.center(200, 600);
 47                     //中心點十二（5,600）
 48                     this.center(5, 600);
 49                     //中心點十三（700,700）
 50                     this.center(700, 700);
 51                     //中心點十四（100,700）
 52                     this.center(100, 700);
 53 
 54                 },
 55                 //此方法用來畫棋盤線
 56                 LineDrawing: function(mx, my, lx, ly) {
 57                     this.ctx.beginPath();
 58                     this.ctx.moveTo(mx, my);
 59                     this.ctx.lineTo(lx, ly);
 60                     this.ctx.stroke();
 61                 },
 62                 //棋盤行
 63                 row: function() {
 64                     for(var i = 100; i <= 800; i += 100) {
 65                         this.ctx.beginPath();
 66                         this.ctx.moveTo(5, i);
 67                         this.ctx.lineTo(800, i);
 68                         this.ctx.stroke();
 69                     }
 70                 },
 71                 //棋盤列
 72                 cols: function() {
 73                     for(var i = 100; i <= 700; i += 100) {
 74                         this.ctx.beginPath();
 75                         this.ctx.moveTo(i, 5);
 76                         this.ctx.lineTo(i, 900);
 77                         this.ctx.stroke();
 78                     }
 79                     //清除指定的矩形區域
 80                     this.ctx.clearRect(5, 402, 795, 95);
 81                     //斜線
 82                     this.LineDrawing(300, 5, 500, 200);
 83                     this.LineDrawing(300, 705, 500, 900);
 84                     //反斜線
 85                     this.LineDrawing(500, 5, 300, 200);
 86                     this.LineDrawing(500, 705, 300, 900);
 87                 },
 88                 //坐標的中心點
 89                 center: function(x, y) {
 90                     this.ctx.lineWidth = 5;
 91                     //中心點一（100,200）
 92                     //左上
 93                     this.LineDrawing(x - 10, y - 30, x - 10, y - 10);
 94                     this.LineDrawing(x - 10, y - 10, x - 30, y - 10);
 95                     //右上
 96                     this.LineDrawing(x + 10, y - 30, x + 10, y - 10);
 97                     this.LineDrawing(x + 10, y - 10, x + 30, y - 10);
 98                     //左下
 99                     this.LineDrawing(x - 10, y + 30, x - 10, y + 10);
100                     this.LineDrawing(x - 10, y + 10, x - 30, y + 10);
101                     //右下
102                     this.LineDrawing(x + 10, y + 30, x + 10, y + 10);
103                     this.LineDrawing(x + 10, y + 10, x + 30, y + 10);
104                 },
105                 drawFont: function() {
106                     this.ctx.lineWidth = 1;
107                     //繪制文字
108                     this.ctx.font = "60px microsoft yahei";
109                     this.ctx.save(); //保存點
110                     //將坐標中心作為起啟點
111                     this.ctx.translate(canvas1.width / 2, canvas1.height / 2);
112                     var radian = Math.PI / 2; // 弧度制 Math.PI=π
113                     this.ctx.rotate(radian); // 旋轉畫布繪制刻度
114                     //填充
115                     
116                     this.ctx.fillText("楚", -30, -270);
117                     this.ctx.fillText("河", -30, -150);
118                     this.ctx.restore(); //恢復到保存點
119                     this.ctx.save();
120                     //將坐標中心作為起啟點
121                     this.ctx.translate(canvas1.width / 2, canvas1.height / 2);
122                     var radian = Math.PI / -2; 
123                     this.ctx.rotate(radian);
124                     this.ctx.fillText("漢", -30, -270);
125                     this.ctx.fillText("界", -30, -150);
126                     this.ctx.restore();
127                 }
128             };
129             object.init();
130         </script>
131     </body>
132 </html>

View Code

運行結果：

小結：經過簡單封裝后的代碼，在整個window對象中只暴露object對象，這樣看起來就比較好一些了，到現在為止這個簡單的示例就可以說是做完了，深呼了口氣，終於做完了，然后，再次看了下這個棋盤，發現好像還缺了點什么東西，對，此刻我意識到了，是缺了點東西，象棋...象棋,只有棋盤沒有棋子怎么行？然后又做了一些改進，下面是我的第四次代碼改進。

4、第四次：canvas繪制象棋（封裝JavaScript）+繪制棋子示例代碼

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>canvas繪圖_象棋盤</title>
  7     </head>
  8 
  9     <body>
 10         <canvas id="canvas1" style="background-color:burlywood" width="1005" height="1105">不支持Canvas</canvas>
 11         <img src="../img/blue-ju.gif" id="ju" hidden="hidden" />
 12         <img src="../img/blue-ma.gif" id="ma" hidden="hidden" />
 13         <img src="../img/blue-xiang.gif" id="xiang" hidden="hidden" />
 14         <img src="../img/blue-shi.gif" id="shi" hidden="hidden" />
 15         <img src="../img/blue-jiang.gif" id="jiang" hidden="hidden" />
 16         <img src="../img/blue-pao.gif" id="pao" hidden="hidden" />
 17         <img src="../img/blue-bing.gif" id="bing" hidden="hidden" />
 18 
 19         <img src="../img/red-ju.gif" id="r_ju" hidden="hidden" />
 20         <img src="../img/red-ma.gif" id="r_ma" hidden="hidden" />
 21         <img src="../img/red-xiang.gif" id="r_xiang" hidden="hidden" />
 22         <img src="../img/red-shi.gif" id="r_shi" hidden="hidden" />
 23         <img src="../img/red-jiang.gif" id="r_jiang" hidden="hidden" />
 24         <img src="../img/red-pao.gif" id="r_pao" hidden="hidden" />
 25         <img src="../img/red-bing.gif" id="r_bing" hidden="hidden" />
 26         <script type="text/javascript">
 27             var object = {
 28                 //初始化
 29                 init: function() {
 30                     //棋盤外框
 31                     var canvas1 = document.getElementById("canvas1");
 32                     this.ctx = canvas1.getContext("2d");
 33                     this.ctx.lineWidth = 5;
 34                     this.ctx.strokeStyle = "brown";
 35                     this.ctx.strokeRect(100, 100, 800, 900);
 36 
 37                     this.row();
 38                     this.cols();
 39                     this.drawFont();
 40                     //注意：現在的原點中心為（100,100），所以下面的所有坐標在原來的基礎上加（x+100,y+100）；
 41                     //中心點一（1000,200）
 42                     this.center(200, 300);
 43                     //中心點二（700,200）
 44                     this.center(800, 300);
 45                     //中心點三（5,300）
 46                     this.center(105, 400);
 47                     //中心點四（200,300）
 48                     this.center(300, 400);
 49                     //中心點五（400,300）
 50                     this.center(500, 400);
 51                     //中心點六（600,300）
 52                     this.center(700, 400);
 53                     //中心點七（800,300）
 54                     this.center(900, 400);
 55                     //中心點八（800,600）
 56                     this.center(900, 700);
 57                     //中心點九（600,600）
 58                     this.center(700, 700);
 59                     //中心點十（400,600）
 60                     this.center(500, 700);
 61                     //中心點十一（200,600）
 62                     this.center(300, 700);
 63                     //中心點十二（5,600）
 64                     this.center(105, 700);
 65                     //中心點十三（700,700）
 66                     this.center(800, 800);
 67                     //中心點十四（100,700）
 68                     this.center(200, 800);
 69 
 70                     //必須當頁面中的圖片資源加載成功,再畫棋子
 71                     window.onload = function() {
 72                         //棋子圖片
 73                         var ju = document.getElementById("ju");
 74                         var ma = document.getElementById("ma");
 75                         var xiang = document.getElementById("xiang");
 76                         var shi = document.getElementById("shi");
 77                         var jiang = document.getElementById("jiang");
 78                         var bing = document.getElementById("bing");
 79                         var pao = document.getElementById("pao");
 80 
 81                         var r_ju = document.getElementById("r_ju");
 82                         var r_ma = document.getElementById("r_ma");
 83                         var r_xiang = document.getElementById("r_xiang");
 84                         var r_shi = document.getElementById("r_shi");
 85                         var r_jiang = document.getElementById("r_jiang");
 86                         var r_bing = document.getElementById("r_bing");
 87                         var r_pao = document.getElementById("r_pao");
 88                         //將棋子圖像繪制到畫布上
 89                         object.ctx.drawImage(ju, 50, 50, 100, 100);
 90                         object.ctx.drawImage(ma, 150, 50, 100, 100);
 91                         object.ctx.drawImage(xiang, 250, 50, 100, 100);
 92                         object.ctx.drawImage(shi, 350, 50, 100, 100);
 93                         object.ctx.drawImage(jiang, 450, 50, 100, 100);
 94                         object.ctx.drawImage(shi, 550, 50, 100, 100);
 95                         object.ctx.drawImage(xiang, 650, 50, 100, 100);
 96                         object.ctx.drawImage(ma, 750, 50, 100, 100);
 97                         object.ctx.drawImage(ju, 850, 50, 100, 100);
 98                         object.ctx.drawImage(pao, 150, 250, 100, 100);
 99                         object.ctx.drawImage(pao, 750, 250, 100, 100);
100                         object.ctx.drawImage(bing, 50, 350, 100, 100);
101                         object.ctx.drawImage(bing, 250, 350, 100, 100);
102                         object.ctx.drawImage(bing, 450, 350, 100, 100);
103                         object.ctx.drawImage(bing, 650, 350, 100, 100);
104                         object.ctx.drawImage(bing, 850, 350, 100, 100);
105 
106                         object.ctx.drawImage(r_ju, 50, 950, 100, 100);
107                         object.ctx.drawImage(r_ma, 150, 950, 100, 100);
108                         object.ctx.drawImage(r_xiang, 250, 950, 100, 100);
109                         object.ctx.drawImage(r_shi, 350, 950, 100, 100);
110                         object.ctx.drawImage(r_jiang, 450, 950, 100, 100);
111                         object.ctx.drawImage(r_shi, 550, 950, 100, 100);
112                         object.ctx.drawImage(r_xiang, 650, 950, 100, 100);
113                         object.ctx.drawImage(r_ma, 750, 950, 100, 100);
114                         object.ctx.drawImage(r_ju, 850, 950, 100, 100);
115                         object.ctx.drawImage(r_pao, 150, 750, 100, 100);
116                         object.ctx.drawImage(r_pao, 750, 750, 100, 100);
117                         object.ctx.drawImage(r_bing, 50, 650, 100, 100);
118                         object.ctx.drawImage(r_bing, 250, 650, 100, 100);
119                         object.ctx.drawImage(r_bing, 450, 650, 100, 100);
120                         object.ctx.drawImage(r_bing, 650, 650, 100, 100);
121                         object.ctx.drawImage(r_bing, 850, 650, 100, 100);
122 
123                     }
124                 },
125                 //此方法用來畫棋盤線
126                 LineDrawing: function(mx, my, lx, ly) {
127                     this.ctx.beginPath();
128                     this.ctx.moveTo(mx, my);
129                     this.ctx.lineTo(lx, ly);
130                     this.ctx.stroke();
131                 },
132                 //棋盤行
133                 row: function() {
134                     for(var i = 200; i <= 900; i += 100) {
135                         this.ctx.beginPath();
136                         this.ctx.moveTo(105, i);
137                         this.ctx.lineTo(900, i);
138                         this.ctx.stroke();
139                     }
140                 },
141                 //棋盤列
142                 cols: function() {
143                     for(var i = 200; i <= 800; i += 100) {
144                         this.ctx.beginPath();
145                         this.ctx.moveTo(i, 105);
146                         this.ctx.lineTo(i, 1000);
147                         this.ctx.stroke();
148                     }
149                     //清除指定的矩形區域
150                     //this.ctx.clearRect(5, 402,795, 95);
151                     this.ctx.clearRect(102.5, 502, 795, 95);
152                     //斜線
153                     this.LineDrawing(400, 105, 600, 300);
154                     this.LineDrawing(400, 805, 600, 1000);
155                     //反斜線
156                     this.LineDrawing(600, 105, 400, 300);
157                     this.LineDrawing(600, 805, 400, 1000);
158                 },
159                 //坐標的中心點
160                 center: function(x, y) {
161                     this.ctx.lineWidth = 5;
162                     //中心點一（100,200）
163                     //左上
164                     this.LineDrawing(x - 10, y - 30, x - 10, y - 10);
165                     this.LineDrawing(x - 10, y - 10, x - 30, y - 10);
166                     //右上
167                     this.LineDrawing(x + 10, y - 30, x + 10, y - 10);
168                     this.LineDrawing(x + 10, y - 10, x + 30, y - 10);
169                     //左下
170                     this.LineDrawing(x - 10, y + 30, x - 10, y + 10);
171                     this.LineDrawing(x - 10, y + 10, x - 30, y + 10);
172                     //右下
173                     this.LineDrawing(x + 10, y + 30, x + 10, y + 10);
174                     this.LineDrawing(x + 10, y + 10, x + 30, y + 10);
175                 },
176                 drawFont: function() {
177                     this.ctx.lineWidth = 1;
178                     //繪制文字
179                     this.ctx.font = "60px microsoft yahei";
180                     this.ctx.save(); //保存點
181                     //將坐標中心作為起啟點
182                     this.ctx.translate(canvas1.width / 2, canvas1.height / 2);
183                     var radian = Math.PI / 2; // 弧度制 Math.PI=π
184                     this.ctx.rotate(radian); // 旋轉畫布繪制刻度
185                     //填充
186                     this.ctx.fillText("楚", -30, -270);
187                     this.ctx.fillText("河", -30, -150);
188                     this.ctx.restore(); //恢復到保存點
189                     this.ctx.save();
190                     //將坐標中心作為起點
191                     this.ctx.translate(canvas1.width / 2, canvas1.height / 2);
192                     var radian = Math.PI / -2;
193                     this.ctx.rotate(radian);
194                     this.ctx.fillText("漢", -30, -270);
195                     this.ctx.fillText("界", -30, -150);
196                     this.ctx.restore();
197                 }
198             };
199             object.init();
200         </script>
201     </body>
202 
203 </html>

View Code

運行結果如下：

小結：上面只是在原來的基礎上添加了繪制棋子的代碼，看到這個效果，感覺算是看到象棋的影子了，通過這個簡單的示例，我總結了一下：就是做任何事情都要追求完美，先把功能做好后，再考慮代碼優化、美化界面。上面的示例若有不足之處，歡迎大家批評指正！謝謝。

二、示例下載

GitHub下載地址：https://github.com/SeeYouBug2/Canvas-Draw-Chess.git

三、了解更多canvas的知識

HTML5 學習筆記（四）——canvas繪圖、WebGL、SVG

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 學習總結（四）——canvas繪圖、WebGL、SVG HTML5 學習總結（四）——canvas繪圖、WebGL、SVG html5 canvas繪圖-刻度儀表盤的繪制 HTML5css3學習總結(4)canvas繪圖 HTML5 Canvas繪圖基礎 html5 canvas常用api總結(二)--繪圖API html5 canvas之繪制曲線 HTML5之Canvas繪圖——使用Canvas繪制圖形的基本教程 HTML5 Canvas 繪制斜線 HTML5 Canvas 繪制時鍾