一、HTML5canvas的学习与巩固1、第一次:canvas绘制象棋盘(笨方法)示例代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8 ...
一、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, 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>
原标题:HTML5学习与巩固——canvas绘图象棋盘
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。