<canvas id="c" width="500" height="500"></canvas>//创建canvas节点 <script type="text/javascript"> var canvas = document.getElementById('c'); var c = canvas.getContext('2d');//获取canvas对象 <script>
然后先设置定时器，在定时器中先位移canvas的起点，canvas的起点默认在画布的左上角（0，0）
setInterval(()=>{ // 清空画布 c.clearRect(0,0,500,500); c.save();//保存状态 c.translate(250,250);//位移canvas的起点到画布的中心 taiji();//然后调用taiji函数以起点在画布的中心画图 c.restore()//恢复状态 },100);
设置之后的起点在画图的中心
然后开始在以（250,250）为起点的画布画静态的太极
function taiji(){ // 绘制黑色半圆 c.beginPath(); c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI,true); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制白色半圆 c.beginPath(); c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI); c.closePath(); c.fillStyle='white'; c.fill(); // 绘制小白色半圆 c.beginPath(); c.arc(0,100,100,-0.5*Math.PI,0.5*Math.PI,true); c.closePath(); c.fillStyle='white'; c.fill(); // 绘制小黑色半圆 c.beginPath(); c.arc(0,-100,100,-0.5*Math.PI,0.5*Math.PI); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制黑色小圆 c.beginPath(); c.arc(0,100,30,0,2*Math.PI); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制白色小圆 c.beginPath(); c.arc(0,-100,30,0,2*Math.PI); c.closePath(); c.fillStyle='white'; c.fill(); }
最后开始调用旋转
// 太极旋转 var i= 0; setInterval(()=>{ // 清空画布 c.clearRect(0,0,500,500); c.save();//保存状态 c.translate(250,250); // 旋转 c.rotate(Math.PI/180*i); i+=5; // taiji(); c.restore()//恢复状态 },100); image-20201111200313660
最后附上完整的代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #c { background-color: #ccc; } </style> </head> <body> <canvas id="c" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById('c'); var c = canvas.getContext('2d'); function taiji(){ // 绘制黑色半圆 c.beginPath(); c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI,true); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制白色半圆 c.beginPath(); c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI); c.closePath(); c.fillStyle='white'; c.fill(); // 绘制小白色半圆 c.beginPath(); c.arc(0,100,100,-0.5*Math.PI,0.5*Math.PI,true); c.closePath(); c.fillStyle='white'; c.fill(); // 绘制小黑色半圆 c.beginPath(); c.arc(0,-100,100,-0.5*Math.PI,0.5*Math.PI); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制黑色小圆 c.beginPath(); c.arc(0,100,30,0,2*Math.PI); c.closePath(); c.fillStyle='black'; c.fill(); // 绘制白色小圆 c.beginPath(); c.arc(0,-100,30,0,2*Math.PI); c.closePath(); c.fillStyle='white'; c.fill(); } // 太极旋转 var i= 0; setInterval(()=>{ // 清空画布 c.clearRect(0,0,500,500); c.save();//保存状态 c.translate(250,250); // 旋转 c.rotate(Math.PI/180*i); i+=5; // taiji(); c.restore()//恢复状态 },100); </script> </body> </html>