画太极

今天，我想来画一下太极。并让它转动。

用画布画出来，这样 我先把代码写出来 并旁边加注释，这样就能看的更明白了

代码及注释如下：

首先在body内做好画布

<canvas id="canvas" width="500" height="500"></canvas>

然后 在javaScript标签内画出相对应的代码

var deg = 0;  //定义一个角度，初始值为零

var w = 'white';   定义两变量  一个为白色，一个为黑色

var b = 'black';

// 用一个函数方法封装所画出来的太极，

function draw(){

var canvas = document.getElementById('canvas');   //获取元素

var ctx = canvas.getContext('2d');

var posx = Math.sin(deg)*100;

var posy = Math.cos(deg)*100;  // 这是正弦，余弦值，目的是找出太极内小半圆的 原点在画布的位置

ctx.clearRect(0,0,500,500);  // 当然画出后运行方法时要不停地消除，否则内存会变大

//  接下来就是不断地画出来 ，逻辑比较简单 不解释，主要是找出相对应的黑白颜色的圆和半圆坐标，不断地画出来

ctx.beginPath();

ctx.arc(250,250,200,0,2*Math.PI,false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = b;

ctx.arc(250,250,200,0.5*Math.PI+deg,1.5*Math.PI+deg,false);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = w;

ctx.arc(250,250,200,0.5*Math.PI+deg,1.5*Math.PI+deg,true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = w;

ctx.arc(250-posx,250+posy,100,0.5*Math.PI+deg,1.5*Math.PI+deg,false);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = b;

ctx.arc(250+posx,250-posy,100,0.5*Math.PI+deg,1.5*Math.PI+deg,true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = w;

ctx.arc(250+posx,250-posy,10,0,2*Math.PI,true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = b;

ctx.arc(250-posx,250+posy,10,0,2*Math.PI,true);

ctx.fill();

ctx.closePath();

deg+=0.1;  // 角度不断地加，会在定时器的作用下做出太极不断转的动画效果

}

setInterval(draw,100);

好，就到这里。