HTML5 canvas animation and rotation

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>

The issue is that the clearRect call doesn't seem to effective; sometimes I can see "trails" from one or more circles:

There are several issues here:

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 canvas animation and rotation

问题:

回答1:

收藏的人(0)

HTML5 canvas animation and rotation

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮