你的位置:首页 > 网页设计

[网页设计]HTML5的canvas实现的旋转动画效果

HTML5的canvas实现的旋转动画效果:

本章节分享一段代码实例,它实现了太极八卦图的旋转效果,感兴趣的朋友可以做一下分析。

代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><body> <canvas id="myCanvas" width="500" height="500" >浏览器不支持</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); var angle = 0; var count = 360; var clrA = '#000'; var clrB = 'red';function taiji(x, y, radius, angle, wise) {  angleangle = angle || 0;  wisewise = wise ? 1 : -1;  ctx.save();  ctx.translate(x, y);  ctx.rotate(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(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);  ctx.fill();  ctx.beginPath();  ctx.fillStyle = clrA;  ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);  ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);  ctx.fill();  ctx.beginPath();  ctx.fillStyle = clrB;  ctx.arc(wise * +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(200, 200, 50, Math.PI * (angle / count) * 2, true);  angle = (angle + 5) % count; }, 50); </script></body> </html>

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4161.html

最为原始的地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13482