点击这里可以看动画效果：
http://www.108js.com/article/article3/zip1/30229/Test2.html
效果图：
代码：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
<script type="text/javascript">
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);
</script>
</body>
</html>
全部代码请下载。
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
- 大小: 3.3 KB
分享到：
相关推荐
H5新特性的CSS动画，更多的是使用CSS选择器来完成，尽可能的不加入JS代码来实现动画效果，该案例为2D动画，模仿太极的旋转，仅供娱乐。
主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
通过html5与css配合，做了一个简单的太极图，再做个动画旋转。给太极图做个背景，再做一个背景放大缩小的动画效果。最后实现一个旋转和放大缩小的太极图，都是html5和css最基础的应用实践。-逆战班
这是一款很有趣的纯CSS3小动画，它是我们中国人都非常熟悉的阴阳太极图案，整个图案是利用纯CSS3绘制而成，而且更酷的是，这个太极图案还会不断旋转，看上去非常的...而且这个旋转动画特效也是利用CSS3的动画属性实现。
html5渐变动画实现太极八卦旋转效果，另一个页面是用动画和border实现同样效果
旋转太极和3D旋转魔方
太极图border-radius 除了做边框圆角效果之外，把它用在画图示上的话，其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。 检视原始码 HTML XML/HTML Code复制内容到剪贴板 <body> ...