首页 > 代码库 > HTML 5：绘制旋转的太极图

HTML 5：绘制旋转的太极图

2024-08-06 14:19:05   226人阅读

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/

原文首发：http://www.ido321.com/1308.html

下一篇：程序员成长道路上必经的几个阶段

HTML 5：绘制旋转的太极图


联系
我们