HTML5画布动画和旋转 [英] HTML5 canvas animation and rotation
本文介绍了HTML5画布动画和旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个围绕中心点旋转的五个圆形的新画布动画（类似于太阳系）。所以我创建了五个圆圈并尝试旋转画布：
I'm trying to create a new canvas animation of five circles revolving around a center point (similar to the solar system). So I've created the five circles and trying to rotate the canvas:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var num=5, balls = [] ;
function Ball() {
this.r = 20;
this.x =Math.random()*200;
this.y = Math.random()*150;
}
function init() {
canvas = document.getElementById("testCanvas");
context = canvas.getContext("2d");
context.clearRect(0,0,context.width,context.height);
context.fillStyle= "lightblue";
context.save();
context.translate(300,300);
for(i=0; i<num ;i++){ balls[i] = new Ball() }
setInterval(draw,50);
}
//function blank() {
//context.fillStyle="white";
//context.fillRect(0,0,context.canvas.width, context.canvas.height);
// }
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
for(i=0 ; i< num ; i++){
var Ball = balls[i];
context.beginPath();
context.arc(Ball.x, Ball.y, Ball.r,0,2*Math.PI, false);
//context.stroke();
context.fill();
}
context.rotate(0.08);
context.translate(0,0);
context.beginPath();
context.arc(0,0,240,0,Math.PI*2,false);
context.lineWidth = 8;
context.stroke();
}
</script>
</head>
<body onload="init()">
<canvas id="testCanvas" width="600" height="600">
Canvas not supported
</canvas>
</body>
</html>
问题是 clearRect 调用似乎没有效果;有时我可以从一个或多个圆圈看到踪迹：
The issue is that the clearRect call doesn't seem to effective; sometimes I can see "trails" from one or more circles:
推荐答案
这里有几个问题：
- 主要原因：在翻译画布时使用clearRect。这意味着它无法清除整个画布。始终清除未转换
- 保存（）永远不会恢复（） - 它可能稍后用于翻译
- 使用requestAnimationFrame进行动画处理 - 这是效率更高。而是更改旋转速率。
- 如果颜色相同，您还可以将所有弧添加到路径并填充一次。这将加快绘图速度。
- Main reason: clearRect is used while the canvas is translated. This means it won't be able to clear the whole canvas. Always clear untransformed
- a save() is never restored() - it was probably intended for translation later on
- Use requestAnimationFrame to animate - this is much more efficient. Instead change the rotation rate.
- You can also add all arcs to the path and fill once provided the color is the same. This will speed up the drawing.
我在下面做了一些更改 -
I made some changes below -
var num = 5,
rotation = 0,
balls = [];
function Ball() {
this.r = 20;
this.x = Math.random() * 200;
this.y = Math.random() * 150;
}
(function init() {
canvas = document.getElementById("testCanvas");
context = canvas.getContext("2d");
context.clearRect(0, 0, context.width, context.height);
context.fillStyle = "lightblue";
for (i = 0; i < num; i++) {
balls[i] = new Ball()
}
requestAnimationFrame(draw);
})();
function draw() {
// reset transforms before clearing
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// tramslate and rotate an absolute rotation value
context.translate(300, 300);
context.rotate(rotation);
// draw arcs
for (i = 0; i < num; i++) {
var Ball = balls[i];
context.beginPath();
context.arc(Ball.x, Ball.y, Ball.r, 0, 2 * Math.PI, false);
//context.stroke();
context.fill();
}
context.beginPath();
context.arc(0, 0, 240, 0, Math.PI * 2, false);
context.lineWidth = 8;
context.stroke();
// update rotation value and request new frame
rotation += 0.04;
requestAnimationFrame(draw)
}
<canvas id="testCanvas" width="600" height="600">
Canvas not supported
</canvas>
这篇关于HTML5画布动画和旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
