博主新手，请多谅解。欢迎指导！
以下为完整的代码段：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
// 获取 canvas 的对象
var canvas = document.getElementById('canvas');
// 获取 canvas 的绘图环境
var ctx = canvas.getContext('2d');
// 设置太极的圆心和半径
var cx = canvas.width/2, cy = canvas.height/2, cr = 300;
// 平移坐标系
ctx.translate(cx,cy);
// 初始旋转的角度
var angle = 0;
//封装函数
function drawTaiji(){
//构造函数
function tj(fs,cx,cy,cr,d1,d2,b){
this.fs = fs;
this.cx = cx;
this.cy = cy;
this.cr = cr;
this.d1 = d1;
this.d2 = d2;
this.b = b;
//画圆
this.show1 = function(){
ctx.save();
ctx.fillStyle = this.fs;
ctx.beginPath();
ctx.arc(this.cx,this.cy,this.cr,this.d1,this.d2,this.b);
ctx.fill();
ctx.restore();
}
//描边
this.show2 = function(){
ctx.save();
ctx.StrokeStyle = this.fs;
ctx.beginPath();
ctx.arc(this.cx,this.cy,this.cr,this.d1,this.d2,this.b);
ctx.stroke();
ctx.restore();
}
}
//实例化对象以及调用
var tj1 = new tj('#fff',0,0,cr,0,Math.PI,true);tj1.show1();tj1.show2();
var tj2 = new tj('#000',0,0,cr,0,Math.PI,false);tj2.show1();
var tj3 = new tj('#000',0-cr/2,0,cr/2,0,Math.PI*2,true);tj3.show1();
var tj4 = new tj('#fff',0+cr/2,0,cr/2,0,Math.PI*2,true);tj4.show1();
var tj5 = new tj('#fff',0-cr/2,0,cr/7,0,Math.PI*2,true);tj5.show1();
var tj6 = new tj('#000',0+cr/2,0,cr/7,0,Math.PI*2,true);tj6.show1();
}
// 用定时器处理 太极旋转
setInterval(function(){
// 保存状态
ctx.save();
// 坐标系旋转
ctx.rotate(Math.PI/180*(angle+=2));
drawTaiji();
// 恢复状态
ctx.restore();
},33)
</script>
</body>
</html>版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30669943/article/details/81145607