用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);
效果如下,一个旋转的太极(看不到的可以更新浏览器了,程序员怎么能用这么老的浏览器):
后来无聊又改成了八卦