HTML 5:绘制旋转的太极图

PHPABC Html5 1,091 次浏览 没有评论

HTML 5:绘制旋转的太极图

HTML:

<!DOCTYPE> <html> <head>     <meta charset="utf-8" />     <title>Canvas绘制旋转太极</title> </head> <body>     <canvas id="face" width="200" height="200"></canvas> </body> </html>

 

JavaScript:

var canvas = document.getElementById("face"); var cxt = canvas.getContext('2d'); var r = 100;   //半径 var pointX = 0;  //圆心x坐标 var pointY = 0; //圆心y坐标   // 绘制扇形填充  function pie (g,radius,startAngle,endAngle,color,x,y)   {      g.fillStyle = color;      g.beginPath();      g.arc(x,y,radius,startAngle,endAngle,true);      g.closePath();      g.fill();  }   var q = 0;  function redrawTaiji()  {      // 保存状态      cxt.save();      // 清理图像      cxt.clearRect(0,0,canvas.width,canvas.height);      cxt.translate(100,100);      q += Math.PI / 6;      cxt.rotate(q);      cxt.beginPath();      // 绘制两个最大圆      pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY);      pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY);      // 绘制两个中圆      pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2);      pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2);      // 绘制两个最小圆      pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2);      pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2);      cxt.closePath();      // 恢复状态      cxt.restore();  }  function initTaiji()  {      redrawTaiji();      setInterval(redrawTaiji,500);  }  initTaiji();

 

效果:http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go