canvas 画个太极

首先我们生成一个画布，并给他设置一个大小
html中

<canvas id="myCanvas" width="1000px" height="800px" style="border: 1px solid black;"></canvas>

用js画

var c =document.getElementById("myCanvas");
var ctx =c.getContext("2d");

ctx.beginPath()
ctx.arc(400,400,200,Math.PI/2,Math.PI/2*3,false);
ctx.fillStyle ="#000"
ctx.fill()

ctx.beginPath()
ctx.arc(400,400,200,Math.PI/2,Math.PI/2*3,true);
ctx.fillStyle ="#fff"
ctx.fill()
ctx.beginPath()
ctx.arc(400,400,200,0,Math.PI/2);
ctx.strokeStyle ="black"
ctx.stroke()

ctx.beginPath()
ctx.arc(400,300,100,0,Math.PI*2);
ctx.fillStyle ="#fff"
ctx.fill()

ctx.beginPath()
ctx.arc(400,500,100,0,Math.PI*2);
ctx.fillStyle ="#000"
ctx.fill()

ctx.beginPath()
ctx.arc(400,300,50,0,Math.PI*2);
ctx.fillStyle ="#000"
ctx.fill()

ctx.beginPath()
ctx.arc(400,500,50,0,Math.PI*2);
ctx.fillStyle ="#fff"
ctx.fill()

先画一个向左的半圆，再画一个向右的半圆，并把它们拼接起来，一个时黑色的，一个时白色的，再在上面画两个整圆，大小为前圆的一半，一个为黑色，一个为白色的，让他们一上一下，然后再在它们上画一个同心圆，大小为前圆的一半，颜色调换。