使用html5和js画个太极图
功能:html5画太极图
来源:www.K88.NET
<
canvas id="mycanvas" width="600" height="400" style="border: 1px solid
#ccc
background-color:
#ccc
">
你的浏览器不支持canvas<
/canvas>
<
script>
 
 
var canvas = document.getElementById('mycanvas')
 
 
var ctx = canvas.getContext('2d')
 
 
//左边半个黑圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#000"
 
 
ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,false)
 
 
ctx.fill()
 
 
//右边半个白圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#fff"
 
 
ctx.arc(200,200,150,1.5*Math.PI,2.5*Math.PI,false)
 
 
ctx.fill()
 
 
//圆心
 
 
/*ctx.beginPath()
 
 
ctx.strokeStyle="
#000"
 
 
ctx.arc(200,200,1,0,2*Math.PI,false)
 
 
ctx.stroke()
*/
 
 
//上面半个圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#fff"
 
 
ctx.arc(200,125,75,0.5*Math.PI,1.5*Math.PI,false)
 
 
ctx.fill()
 
 
//上面半个圆中小黑圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#000"
 
 
ctx.arc(200,125,10,0,2*Math.PI,false)
 
 
ctx.fill()
 
 
//下面半个圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#000"
 
 
ctx.arc(200,275,75,1.5*Math.PI,2.5*Math.PI,false)
 
 
ctx.fill()
 
 
//下面半个圆中个小白圆
 
 
ctx.beginPath()
 
 
ctx.fillStyle="
#fff"
 
 
ctx.arc(200,275,10,0,2*Math.PI,false)
 
 
ctx.fill()
<
/script>
使用html5和js画个太极图