咱们日常生活中肯定看到过太极八卦之类的吧，今天就用canvas来教大家画一把太极！还可以让这个太极动起来的内种
首先也是在body里面用canvas这个弄一个画板出来
<body>
<canvas id="c" width="700" height='700' style="border: 1px solid red;"></canvas>
</body>
//设置一个长宽都是七百的画板
之后中单就是js里面的了想要实现就得用js来实现，看好了啊：
<script>
//获取body里面的值
var c = document.querySelector('#c');
var ctx = c.getContext('2d');
ctx.translate(300,300)//把初始坐标挪挪位置
//一个定时器让他动起来
setInterval(function(){
ctx.rotate(-Math.PI/180)//让这个太极旋转一度一度转
//大圆的外边线
ctx.beginPath()
ctx.arc(0,0,200,0,2*Math.PI);
ctx.fillStyle = 'black';
// ctx.fill();
ctx.stroke()
ctx.closePath();
//黑色的半圆
ctx.beginPath()
ctx.arc(0,0,200,(Math.PI / 180) * 90,(Math.PI / 180) * 270);//五个数值分别是初始x坐标y坐标、半径大小、初始度数值和结束度数值
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
//白色占他一半的那个圆
ctx.beginPath()
ctx.arc(0,-100,100,0,2*Math.PI);//
ctx.fillStyle = '#fff';
ctx.fill();
ctx.closePath();
//白色占他一半的那个圆
ctx.beginPath()
ctx.arc(0,100,100,0,2*Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
//占大圆一半的黑色圆里面的白色小圆
ctx.beginPath()
ctx.arc(0,100,30,0,2*Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.closePath();
//占大圆一半的白色圆里面的黑色小圆
ctx.beginPath()
ctx.arc(0,-100,30,0,2*Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath();
},0.1)
</script>
我在里面写了很多的注释大家仔细理解一下应该可以懂的
太极.png
基本就是上面这样的了但是我这个不是动态的图真正的做好了的太极是在旋转的
