HTML5 画布动画和旋转答案

【问题标题】：HTML5 canvas animation and rotationHTML5 画布动画和旋转
【发布时间】：2015-05-25 05:47:32
【问题描述】：

我正在尝试创建一个新的画布动画，其中包含五个围绕中心点旋转的圆圈（类似于太阳系）。所以我创建了五个圆圈并尝试旋转画布：

<!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 调用似乎无效；有时我可以从一个或多个圆圈中看到“轨迹”：

【问题讨论】：

标签： html animation canvas

【解决方案1】：

这里有几个问题：

主要原因：在翻译画布时使用了clearRect。这意味着它将无法清除整个画布。始终清除未转换的
save() 永远不会恢复() - 它可能是用于稍后翻译的
使用 requestAnimationFrame 制作动画 - 这样效率更高。而是更改旋转速度。
如果颜色相同，您还可以将所有弧添加到路径并填充。这将加快绘图速度。

我在下面做了一些更改-

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>

【讨论】：

我无法运行您提供的代码...没有任何反应...无法找到问题:(
@sahilraj 我将 init 方法放在 SO 演示的自调用代码中。如果您使用来自 html 的原始 init 调用，只需删除这些副词。