0
HTML5 Canvas组合图形
Posted by Alan on October 10, 2016 in HTML5&CSS3 | ∞
在学习Canvas组合图形时看描述有些云里雾里，于是记录下实际效果来方便查看：
HTML5绘制桌球
Posted by Alan on May 25, 2014 in HTML5&CSS3 | ∞
桌球（又称台球 ，撞球）源自英国，是一项在国际上广泛流行的高雅的室内体育运动，是一种用球杆在台上击球，依靠计算得分确定比赛胜负的室内娱乐体育项目。 下图为通过HTML5的Canvas配合JS生成的仿桌球图片，右侧的小球采用随机函数显示不同颜色，每次刷新后将显示不同的组合颜色。 Your browser does not support the canvas element.
HTML5绘制奥运五环
Posted by Alan on May 25, 2014 in HTML5&CSS3 | ∞
奥运五环是奥运会的标志，由Pierre de Coubertin顾拜旦先生于1913年所构思设计的，下面通过HTML5的canvas加js来绘制五环标志。部分代码如下： 创建Canvas:
|
1 |
<canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"></canvas> |
通过javascript设置画布环境并绘制圆形：
|
1 2 3 4 5 6 7 |
var c =document.getElementById("mycanvas"); var ctx = c.getContext("2d"); ctx.lineWidth=5; ctx.strokeStyle="#163B62"; ctx.beginPath(); ctx.arc(70,70,40,0,Math.PI*2,false); //context.arc(x,y,r,sAngle,eAngle,counterclockwise) ctx.stroke(); |
由于IE9以前的版本及其它浏览器早期的版本对canvas不支持，所以将无法正常显示，图形效果如下： Your browser does not support the canvas element.
我的认证
