html 5 canvas 绘制太极demo_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

html 5 canvas 绘制太极demo

字号+ 作者：H5之家来源：H5之家 2016-02-10 15:01 我要评论( )

一个练习canvas的小案例。其中若有小问题，欢迎大神拍砖……^_*代码效果预览地址：http://code.w3ctech.com/detail/2500。1 div class=container2 canvas id=my

1 window.onload = function () { 2 var canvas=document.getElementById("myCanvas"); 3 var ctx=canvas.getContext("2d"); 4 ctx.beginPath(); 5 ctx.arc(200, 100, 100, -0.5 * Math.PI, 0.5 * Math.PI, false); 6 ctx.arc(200, 300, 100, 1.5 * Math.PI, 0.5 * Math.PI, true); 7 ctx.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false); 8 ctx.closePath(); 9 ctx.fillStyle = "black"; 10 ctx.fill(); 11 12 ctx.beginPath(); 13 ctx.arc(200, 100, 25, 0 * Math.PI, 2 * Math.PI, false); 14 ctx.fillStyle = "white"; 15 ctx.fill(); 16 ctx.beginPath(); 17 ctx.arc(200, 300, 25, 0 * Math.PI, 2 * Math.PI, false); 18 ctx.fillStyle = "black"; 19 ctx.fill(); 20 }