你的位置:首页 > 软件开发 > 网页设计 > HTML5学习与巩固——canvas绘图象棋盘

HTML5学习与巩固——canvas绘图象棋盘

发布时间:2016-11-24 19:00:18
一、HTML5canvas的学习与巩固1、第一次:canvas绘制象棋盘(笨方法)示例代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8 ...

一、HTML5canvas的学习与巩固

1、第一次:canvas绘制象棋盘(笨方法)示例代码:

HTML5学习与巩固——canvas绘图象棋盘HTML5学习与巩固——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 (#换成@)。