HTML5技术

HTML5学习与巩固——canvas绘图象棋盘 - SeeYouBug(2)

字号+ 作者:H5之家 来源:H5之家 2016-11-29 18:00 我要评论( )

canvas绘图_象棋盘不支持Canvas { () { ); ); ; ; ); .row(); 23 this .cols(); 24 this .drawFont(); ); ); ); ); ); ); ); ); ); ); ); ); ); ); 53 54 }, (mx, my, lx, ly) { 57 this .ctx.beginPath(); 58 this

canvas绘图_象棋盘不支持Canvas { () { ); ); ; ; ); .row(); 23 this.cols(); 24 this.drawFont(); ); ); ); ); ); ); ); ); ); ); ); ); ); ); 53 54 }, (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 }, () { ) { 65 this.ctx.beginPath(); , i); , i); 68 this.ctx.stroke(); 69 } 70 }, () { ) { 74 this.ctx.beginPath(); ); ); 77 this.ctx.stroke(); 78 } ); ); ); ); ); 87 }, (x, y) { ; ); ); ); ); ); ); ); ); 104 }, () { ; ; ); ); ); .ctx.save(); ); ; 123 this.ctx.rotate(radian); ); ); 126 this.ctx.restore(); 127 } 128 }; 129 object.init();

View Code

运行结果:

4、第四次:canvas绘制象棋盘(封装JavaScript)+绘制棋子示例代码:

canvas绘图_象棋盘不支持Canvas { () { ); ); ; ; ); .row(); 38 this.cols(); 39 this.drawFont(); ); ); ); ); ); ); ); ); ); ); ); ); ); ); () { ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); 122 123 } 124 }, (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 }, () { ) { 135 this.ctx.beginPath(); , i); , i); 138 this.ctx.stroke(); 139 } 140 }, () { ) { 144 this.ctx.beginPath(); ); ); 147 this.ctx.stroke(); 148 } ); ); ); ); ); 158 }, (x, y) { ; ); ); ); ); ); ); ); ); 175 }, () { ; ; ); ); ); .ctx.save(); ); ; 193 this.ctx.rotate(radian); ); ); 196 this.ctx.restore(); 197 } 198 }; 199 object.init();

View Code

运行结果如下:

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 学习总结(一)——HTML5概要与新增标签 - 张果

    HTML5 学习总结(一)——HTML5概要与新增标签 - 张果

    2016-11-29 17:01

  • CSS3学习笔记1-选择器和新增属性 - xinyiyake

    CSS3学习笔记1-选择器和新增属性 - xinyiyake

    2016-11-21 17:00

  • HTML5中引入的关键特性 - 就只是小茗

    HTML5中引入的关键特性 - 就只是小茗

    2016-11-21 16:00

  • HTML5【语法要点】 - Kris゜

    HTML5【语法要点】 - Kris゜

    2016-11-21 12:00

网友点评
>