HTML5的canvas实现的旋转动画效果
摘要：HTML5的canvas实现的旋转动画效果:本章节分享一段代码实例，它实现了太极八卦图的旋转效果，感兴趣的朋友可以做一下分析。代码如下:蚂蚁部落 浏览器不支持 原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4161.html最为原始的地....
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.softwhy.com/forum.php?mod=viewthread&tid=13482
相关文章
最新发布
阅读排行
热门文章
猜你喜欢