下列给出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表示的当然是顺时针了
默认的是把圆心的右端，作为零度角。