首页 > 代码库 > HTML 5：绘制旋转的太极图
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/
原文首发：http://www.ido321.com/1308.html
下一篇：程序员成长道路上必经的几个阶段
HTML 5：绘制旋转的太极图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。