用javascirpt画个太极

偶然看到用代码画太极，感觉很有趣，用JS写了一个

过程很简单，画了张图，应该一看就懂了

代码也很简单，如下，注释很多

function TaiJi(r,canvas){
	this.r = r;
	this.ctx = canvas.getContext("2d");

	var width = canvas.clientWidth, height = canvas.clientHeight;
	this.ctx.translate( width/2, height/2);
}

TaiJi.prototype.draw = function(){
	var ctx = this.ctx;
	var r = this.r;

	//一.画左边半个白圈
	ctx.beginPath();
	ctx.arc(0,0,this.r,1.5*Math.PI,0.5*Math.PI);
	ctx.fillStyle = "#fff";
	ctx.fill();

	//二.右边单个黑圈
	ctx.beginPath();
	ctx.arc(0,0,r,0.5*Math.PI,1.5*Math.PI);
	ctx.fillStyle = "#000";
	ctx.fill();

	//以半径的一半为新的半径，在中心线上下1/4处各画两个半圆
	var r2 = r/2;

	//三.上边小半圆
	ctx.beginPath();
	//理论上只要半圆就好，不过如果实际只画半圆的话，不是很贴，会有一道不明显的细缝，所以画了整个圆
	ctx.arc(0,-r2,r2,0,2*Math.PI);
	ctx.fillStyle = "#fff";
	ctx.fill();

	//四.下边小半圆
	ctx.beginPath();
	//理论上只要半圆就好，不过如果实际只画半圆的话，不是很贴，会有一道不明显的细缝，所以画了整个圆
	ctx.arc(0,r2,r2,0*Math.PI,2*Math.PI);
	ctx.fillStyle = "#000";
	ctx.fill();

	//画两个“眼睛”，具体长度应该是多少我也不知道
	//这里定为半径的1/5，看起来比较像了，不纠结了
	//圆心就是三，四两步里面的圆心
	var r3 = r / 5

	//五.上方黑色“眼睛”
	ctx.beginPath();
	ctx.arc(0,-r2,r3,0,2*Math.PI);
	ctx.fillStyle = "#000";
	ctx.fill();

	//六.下方白色“眼睛”
	ctx.beginPath();
	ctx.arc(0,r2,r3,0,2*Math.PI);
	ctx.fillStyle = "#fff";
	ctx.fill();
}

//让太极旋转
TaiJi.prototype.rotate = function(interval){
	var self = this;
	setInterval(function(){
		self.ctx.rotate( 0.5 * Math.PI/180);
		self.draw();
	},interval);
}

/*****************************************/

var taiji = new TaiJi(200, document.getElementById('myCanvas') );
taiji.rotate(30);

　　

效果如下，一个旋转的太极（看不到的可以更新浏览器了，程序员怎么能用这么老的浏览器）：

后来无聊又改成了八卦