旋转太极html源码,HTML5 太极旋转动画

点击这里可以看动画效果：

http://www.108js.com/article/article3/zip1/30229/Test2.html

效果图：

代码：

your browser does not support the canvas tag

var canvas = document.getElementById('myCanvas');

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

var angle=0;

function taiji(ctx,x, y, radius, angle, clrA,clrB,wise) {

angle = angle || 0;

wise=wise||1;

ctx.save();

ctx.translate(x, y);

ctx.rotate(wise*angle);

ctx.fillStyle = clrA;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, Math.PI, true);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = clrB;

ctx.arc(0, 0, radius, 0, Math.PI, false);

ctx.fill();

ctx.fillStyle = clrB;

ctx.beginPath();

ctx.arc(-0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = clrA;

ctx.arc(0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);

ctx.arc(-0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);

ctx.fill();

ctx.beginPath();

ctx.fillStyle = clrB;

ctx.arc(0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);

ctx.fill();

ctx.restore();

}

loop = setInterval(function () {

//beginTag = true;

ctx.clearRect(0, 0, canvas.width, canvas.height);

taiji(ctx,200, 200, 50,Math.PI * (angle / 360) * 2, "#000","#f00",1);

taiji(ctx,320, 200, 50,Math.PI * (angle / 360) * 2, "#000","#f00",-1);

angle = (angle + 5) % 360;

}, 50);

全部代码请下载。

热情奉献：HTML5 Canvas绘图与动画学习59例源码：

http://www.108js.com/example.html