HTML5 Canvas简略动画：圆周运动-HTML教程-爱易网页

HTML5 Canvas简略动画：圆周运动

日期：2014-05-16　浏览次数：20684 次

HTML5 Canvas简单动画：圆周运动
一个简单的动画：两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。

欢迎访问博主的网站：http://www.108js.com/link.html

效果图：

<!DOCTYPE html>
<html>
 <head>
  <title>Making things move</title>
  <meta charset="gbk">
	
  <script type="text/javascript">
    var canvas,context;
    var canvasWidth,canvasHeight; 	
    var playAnimation = true;
				
    var startButton,stopButton;
    var canvas1,context1;
    var shapes = new Array();

  function init() {	
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
			
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;		
    startButton = document.getElementById("startAnimation");
    startButton.disabled="disabled";
    stopButton = document.getElementById("stopAnimation");

    shapes.push(new Shape(150, 150, 100,5));
    shapes.push(new Shape(300, 300, 100,10));

    var canvas1 = document.getElementById("myCanvas1");
    var context1 = canvas1.getContext("2d");
    context1.arc(150,150,100,0,2*Math.PI,true); 
    context1.stroke();//绘制圆
    context1.beginPath();
    context1.arc(300,300,100,0,2*Math.PI,true); 
    context1.strokeStyle="red";
    context1.stroke();//绘制圆

    startButton.onclick=function() {
      this.disabled="disabled";
      stopButton.disabled="";
      playAnimation = true;
      animate();
   }

   stopButton.onclick=function() {
      this.disabled="disabled";
      startButton.disabled="";
      playAnimation = false;
   }
   
  animate();

 }
    
   var Shape = function(x, y,radius,angle) {
     this.x = x;
     this.y = y;
     this.radius=radius;
     this.angle = angle;
    };
				
 function animate() {
  context.clearRect(0, 0, canvasWidth, canvasHeight);
  var shapesLength = shapes.length;
  for (var i = 0; i < shapesLength; i++) {
    var tmpShape = shapes[i];				
    var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
    var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
    if(i==0) tmpShape.angle += 5;
    else tmpShape.angle += 10;

    if (tmpShape.angle > 360) {
      tmpShape.angle = 0;	
    };					
    context.fillRect(x, y, 10, 10);
  }
				
  if (playAnimation) {
    setTimeout(animate, 33);
  }
 }
				
 
</script>
</head>

<body onload="init();">
  
   <canvas id="myCanvas" width="800" height="450" style="background-color: transparent;position:absolute"></canvas>
  <canvas id="myCanvas1" width="800" height="450"></canvas>
  <div>
    <button id="startAnimation">Start</button>
    <button id="stopAnimation">Stop</button>
  </div>
</body>
</html>

上面的代码没有使用jquery,下面这个使用了jquery
演示效果及源码下载：http://www.108js.com/article/article3/30068.html

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5 Canvas简略动画：圆周运动

相关资料更多>

推荐阅读更多>