html画布创建黑白象棋棋盘,HTML5学习与加固——canvas绘图象棋盘

1

2

3

4

5

6

canvas绘图_象棋盘

7

8

9

10 不支持Canvas

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27 varobject={28 //初始化

29 init:function() {30 //棋盘外框

31 varcanvas1=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.οnlοad= function() {72 //棋子图片

73 varju=document.getElementById("ju");74 varma=document.getElementById("ma");75 varxiang=document.getElementById("xiang");76 varshi=document.getElementById("shi");77 varjiang=document.getElementById("jiang");78 varbing=document.getElementById("bing");79 varpao=document.getElementById("pao");80

81 varr_ju=document.getElementById("r_ju");82 varr_ma=document.getElementById("r_ma");83 varr_xiang=document.getElementById("r_xiang");84 varr_shi=document.getElementById("r_shi");85 varr_jiang=document.getElementById("r_jiang");86 varr_bing=document.getElementById("r_bing");87 varr_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(vari= 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(vari= 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 varradian=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 varradian=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

201

202

203