html5 canvas元素使用(一)_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

html5 canvas元素使用(一)

字号+ 作者：H5之家来源：H5之家 2017-09-16 14:15 我要评论( )

html5新增了一个canvas元素，用于在网页上生成一块矩形区域，用于绘制图像，功能非常强大，下面我来简单介绍一下在页面中添加canvas 如上图所示，如果不给canv

1 ctx.beginPath(); 2 ctx.arc(300, 200, 150, 0.5 * Math.PI, 1.5 * Math.PI); 3 ctx.fillStyle = "white"; 4 ctx.fill(); 5 ctx.beginPath(); 6 ctx.arc(300, 200, 150, 1.5 * Math.PI, 0.5 * Math.PI); 7 ctx.fillStyle = "black"; 8 ctx.fill(); 9 ctx.beginPath(); 10 ctx.arc(300, 125, 75, 0.5 * Math.PI, 1.5 * Math.PI); 11 ctx.fillStyle = "black"; 12 ctx.fill(); 13 ctx.beginPath(); 14 ctx.arc(300, 275, 75, 1.5 * Math.PI, 0.5 * Math.PI); 15 ctx.fillStyle = "white"; 16 ctx.fill(); 17 18 ctx.beginPath(); 19 ctx.arc(300, 275, 20, 0, 2 * Math.PI); 20 ctx.fillStyle = "black"; 21 ctx.fill(); 22 ctx.beginPath(); 23 ctx.arc(300, 125, 20, 0, 2 * Math.PI); 24 ctx.fillStyle = "white"; 25 ctx.fill();