下列给出html代码：

<canvas id="canvas" width="480px" height="480px"></canvas>
<span id="message"><span id="cycle" class="message2"></span>       <span class="message2">：圈/秒</span></span></br>
<button id="inc">加速</button>
<button id="dec">减速</button>
<button id="stop">停止</button>
</body>``` 
我们将在<span>中实时更新太极圆旋转的速度，三个按钮<button>元素分别实现太极圆旋转的加速，减速，暂停/开始操作。
下面是相关的CSS代码：

message{

position: absolute;
left: 450px;
top: 50px;
width: 120px;}

.message2{
display:inline-block;
width:60px;}

cycle{

text-align:right;}

button{
height: 30px;
width: 60px;
margin-left: 75px;
}

利用绝对定位，根据top,left属性我们可以把显示太极圆的<span>元素，放到<canvas>元素的左上角。
OK，说完了，HTML(结构层)和CSS(表现层)，接下来我们就来讲讲JavaScript(动作层)的内容。
首先我们需要一个太极图像，我将通过JS编程来得到太极圆。

var taiji=document.getElementById("canvas");

利用DOM中的getElementById方法来得到canvas的引用，id值为前面html代码中<canvas>元素中的id属性的值。
我们就像一个painter拿到了自己的画板(引用)，可是这个画板比较特别，它not only can画2d效果,but also 画3d效果,我们画的是一个平面太极画，所以我们就利用getContext("2d")方法来说明自己将进行2d绘图：
var tua=taiji.getContext("2d");
获得2d上下文好比得到一张白纸，我们就可以画太极了！！

tua.beginPath();

//路径开始

tua.translate(240,240);

//我们将画布的原点平移到画布中心点出，画布为一个480*480的正方形

tua.moveTo(0,-200);

//将起点移到点（0，-200）处，注意前面我们已经将画布的坐标原点移到了原来的(240，240)处

tua.arc(0,-100,100,3/2Math.PI,1/2Math.PI,true);
tua.arc(0,100,100,3/2Math.PI,1/2Math.PI,false);

//分别画分割太极的两个半圆

tua.arc(0,0,200,1/2Math.PI,3/2Math.PI,true);

//太极大圆的一半

tua.fillStyle = "black";

//设置填充色

tua.fill();

//进行填充

tua.arc(0,0,200,3/2Math.PI,1/2Math.PI,true);

//太极大圆的另一半

tua.stroke();

//将上述路径用实线绘制(描边)，我们还可以利用fillStroke属性设置绘制线的颜色。用lineWidth属性设置线宽等，如tua.fillStroke="blue",tua.lineWidth=4;

tua.closePath();

//结束路径
上面之所以我们一半一半的画太极的大圆，是因为我们需要对太极圆进行填充(黑色),我们先将黑色的勾玉画完，在画白色的勾玉

tua.beginPath();
tua.arc(0,-100,20,0,2*Math.PI,true);
tua.fillStyle = "white";
tua.fill();
tua.stroke();
tua.closePath();

//画黑色勾玉中的白色小圆

tua.beginPath();
tua.arc(0,100,20,0,2*Math.PI,true);
tua.fillStyle = "black";
tua.fill();

tua.stroke();
tua.closePath();

//画白色勾玉中的黑色小圆
下面我主要介绍一下，arc()方法的使用:
arc()方法接受六个参数

arc(x,y,radius,startAngle,endAngle,direction)

x,y:在当前画布中的所画圆坐标
radius:所画圆的坐标
startAngle,endAngle:起始角度及终点角度
direction:可选值为两个true和false,true表示从起点到终点逆时针转，false表示的当然是顺时针了
默认的是把圆心的右端，作为零度角。