一、HTML5canvas的學習與鞏固 1、第一次：canvas繪製象棋盤（笨方法）示例代碼： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>canvas繪圖_象棋棋盤</title> 7 </head ...
一、HTML5canvas的學習與鞏固
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,
