HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
程序员文章站
2023-11-13 08:41:52
这篇文章主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下... 14-04-10...
效果图：
方法一：
复制代码
代码如下:<!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 deg = 0;
var r = 30;
var rl = 100;
function drawtaiji() {
var canvas = document.getelementbyid('mycanvas');
var context = canvas.getcontext('2d');
var colora = "rgb(0, 0, 0)";
var colorb = "red";
var px =math.sin(deg)*r;
var py =math.cos(deg)*r;
context.clearrect(0, 0, 300, 300);
context.beginpath();
context.fillstyle = colora;
context.arc(rl, rl, 60, 0.5 * math.pi +deg, 1.5 * math.pi +deg, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl, rl, 60, 1.5* math.pi +deg, 0.5 * math.pi +deg, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl+px, rl-py, 30, 0.5 * math.pi + deg, 1.5 * math.pi + deg, true);
context.closepath();
context.fill();
context.fillstyle = colora;
context.beginpath();
context.arc(rl-px, rl+py, 30, 1.5 * math.pi + deg, 0.5 * math.pi + deg, true);
context.closepath();
context.fill();
context.fillstyle = colora;
context.beginpath();
context.arc(rl+px, rl-py, 8, 0, 2 * math.pi, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl-px, rl+py, 8, 0, 2 * math.pi, true);
context.closepath();
context.fill();
deg +=0.1;
}
setinterval(drawtaiji, 100);
</script> </p> <p></body>
</html>
<html>
<body>
<canvas id="mycanvas" width="500" height="500">your browser does not support the canvas tag</canvas>
<script type="text/javascript">
var deg = 0;
var r = 30;
var rl = 100;
function drawtaiji() {
var canvas = document.getelementbyid('mycanvas');
var context = canvas.getcontext('2d');
var colora = "rgb(0, 0, 0)";
var colorb = "red";
var px =math.sin(deg)*r;
var py =math.cos(deg)*r;
context.clearrect(0, 0, 300, 300);
context.beginpath();
context.fillstyle = colora;
context.arc(rl, rl, 60, 0.5 * math.pi +deg, 1.5 * math.pi +deg, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl, rl, 60, 1.5* math.pi +deg, 0.5 * math.pi +deg, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl+px, rl-py, 30, 0.5 * math.pi + deg, 1.5 * math.pi + deg, true);
context.closepath();
context.fill();
context.fillstyle = colora;
context.beginpath();
context.arc(rl-px, rl+py, 30, 1.5 * math.pi + deg, 0.5 * math.pi + deg, true);
context.closepath();
context.fill();
context.fillstyle = colora;
context.beginpath();
context.arc(rl+px, rl-py, 8, 0, 2 * math.pi, true);
context.closepath();
context.fill();
context.fillstyle = colorb;
context.beginpath();
context.arc(rl-px, rl+py, 8, 0, 2 * math.pi, true);
context.closepath();
context.fill();
deg +=0.1;
}
setinterval(drawtaiji, 100);
</script> </p> <p></body>
</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;
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);
//taiji(350, 350, 50, math.pi * ((count - angle) / count) * 2, false);
angle = (angle + 5) % count;
}, 50);
</script> </p> <p></body>
</html>
推荐阅读
-
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
-
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
-
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）_html5教程技巧
-
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）_html5教程技巧
-
关于HTML5 Canvas旋转动画的2个例子
-
关于HTML5 Canvas旋转动画的2个例子
-
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图_html5教程技巧
-
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图_html5教程技巧