Home思洋影视事业部网站建设知识库
0 Comments

HTML 5 实现小车动画效果(2)

发布于：2013-07-09  |   作者：广州网站建设  |   已聚集：人围观

让我们从Canvas开始

HTML代码：
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<html>   
    2. 
	
  2. 
		   <head>   
    3. 
	
  3. 
		      <meta charset="UTF-8" />   
    4. 
	
  4. 
		         <title>Animation in HTML5 using the canvas element</title>   
    5. 
	
  5. 
		    </head>   
    6. 
	
  6. 
		   <body onload="init();">   
    7. 
	
  7. 
		      <canvas id="canvas" width="1000" height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>   
    8. 
	
  8. 
		      < id="controls">   
    9. 
	
  9. 
		         <button type="button" onclick="speed(-0.1);">Slower</button>   
    10. 
	
  10. 
		         <button type="button" onclick="play(this);">Play</button>   
    11. 
	
  11. 
		     <button type="button" onclick="speed(+0.1)">Faster</button>   
    12. 
	
  12. 
		      </>   
    13. 
	
  13. 
		   </body>   
    14. 
	
  14. 
		</html> 
    15. 




	JS代码：



	定义一些变量：




    
	
  1. 
		var dx=5,           //当前速率     
    2. 
	
  2. 
		            rate=1,         //当前播放速度     
    3. 
	
  3. 
		            ani,            //当前动画循环     
    4. 
	
  4. 
		            c,              //画图(Canvas Context)     
    5. 
	
  5. 
		            w,              //汽车[隐藏的](Canvas Context)     
    6. 
	
  6. 
		            grassHeight=130,        //背景高度     
    7. 
	
  7. 
		            carAlpha=0,         //轮胎的旋转角度     
    8. 
	
  8. 
		            carX=-400,          //x轴方向上汽车的位置(将被改变)     
    9. 
	
  9. 
		            carY=300,           //y轴方向上汽车的位置(将保持为常量)     
    10. 
	
  10. 
		            carWidth=400,       //汽车的宽度     
    11. 
	
  11. 
		            carHeight=130,      //汽车的高度     
    12. 
	
  12. 
		            tiresDelta=15,      //从一个轮胎到最接近的汽车底盘的距离     
    13. 
	
  13. 
		            axisDelta=20,       //汽车底部底盘的轴与轮胎的距离     
    14. 
	
  14. 
		            radius=60;          //轮胎的半径    
    15. 




	为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数




    
	
  1. 
		(function(){    
    2. 
	
  2. 
		           var car=document.createElement('canvas');    //创建元素     
    3. 
	
  3. 
		           car.height=carHeight+axisDelta+radius;   //设置高度     
    4. 
	
  4. 
		           car.width=carWidth;              //设置宽度     
    5. 
	
  5. 
		           w=car.getContext('2d');    
    6. 
	
  6. 
		        })();       
    7. 




	点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		function play(s){               //参数s是一个button  
    2. 
	
  2. 
		           if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画  
    3. 
	
  3. 
		              clearInterval(ani);           //所以我们需要清除它(停止动画)  
    4. 
	
  4. 
		              ani=null;                   
    5. 
	
  5. 
		              s.innerHTML='Play';           //重命名该按钮为“播放”  
    6. 
	
  6. 
		           }else{  
    7. 
	
  7. 
		              ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一  
    8. 
	
  8. 
		              s.innerHTML='Pause';          //重命名该按钮为“暂停”  
    9. 
	
  9. 
		           }  
    10. 
	
  10. 
		        } 
    11. 




	加速，减速，通过以下方法，改变移动距离的大小来实现：




    
	
  1. 
		function speed(delta){  
    2. 
	
  2. 
		           var newRate=Math.max(rate+delta,0.1);  
    3. 
	
  3. 
		           dx=newRate/rate*dx;  
    4. 
	
  4. 
		           rate=newRate;  
    5. 
	
  5. 
		        } 
    6. 




	页面加载的初始化方法：




    
	
  1. 
		//init  
    2. 
	
  2. 
		            function init(){  
    3. 
	
  3. 
		           c=document.getElementById('canvas').getContext('2d');  
    4. 
	
  4. 
		           drawCanvas();  
    5. 
	
  5. 
		        } 
    6. 




	主调方法：




    
	
  1. 
		function drawCanvas(){  
    2. 
	
  2. 
		           c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误  
    3. 
	
  3. 
		           c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作  
    4. 
	
  4. 
		 
    5. 
	
  5. 
		           drawGrass();                     //画背景  
    6. 
	
  6. 
		           c.translate(carX,0);                 //移动起点坐标  
    7. 
	
  7. 
		           drawCar();                       //画汽车(隐藏的canvas)  
    8. 
	
  8. 
		           c.drawImage(w.canvas,0,carY);            //画最终显示的汽车  
    9. 
	
  9. 
		           c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作  
    10. 
	
  10. 
		           carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走  
    11. 
	
  11. 
		           carAlpha+=dx/radius;                 //按比例增加轮胎角度  
    12. 
	
  12. 
		 
    13. 
	
  13. 
		           if(carX>c.canvas.width){             //设置某些定期的边界条件  
    14. 
	
  14. 
		              carX=-carWidth-10;                //也可以将速度反向为dx*=-1;  
    15. 
	
  15. 
		           }  
    16. 
	
  16. 
		        } 
    17. 




	画背景：




    
	
  1. 
		function drawGrass(){  
    2. 
	
  2. 
		           //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标  
    3. 
	
  3. 
		           var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);  
    4. 
	
  4. 
		           //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色  
    5. 
	
  5. 
		           grad.addColorStop(0,'#33CC00');  
    6. 
	
  6. 
		           grad.addColorStop(1,'#66FF22');  
    7. 
	
  7. 
		           c.fillStyle=grad;  
    8. 
	
  8. 
		           c.lineWidth=0;  
    9. 
	
  9. 
		           c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);               
    10. 
	
  10. 
		        } 
    11. 




	画车身：




    
	
  1. 
		function drawCar(){  
    2. 
	
  2. 
		           w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板  
    3. 
	
  3. 
		           w.strokeStyle='#FF6600';                 //设置边框色  
    4. 
	
  4. 
		           w.lineWidth=2;                       //设置边框的宽度，单位为像素  
    5. 
	
  5. 
		           w.fillStyle='#FF9900';                   //设置填充色  
    6. 
	
  6. 
		           w.beginPath();                       //开始绘制新路径  
    7. 
	
  7. 
		           w.rect(0,0,carWidth,carHeight);              //绘制一个矩形  
    8. 
	
  8. 
		           w.stroke();                          //画边框  
    9. 
	
  9. 
		           w.fill();                            //填充背景  
    10. 
	
  10. 
		           w.closePath();                       //关闭绘制的新路径  
    11. 
	
  11. 
		           drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子  
    12. 
	
  12. 
		           drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个  
    13. 
	
  13. 
		             
    14. 
	
  14. 
		        } 
    15. 




	画轮胎：




    
	
  1. 
		function drawTire(x,y){  
    2. 
	
  2. 
		           w.save();  
    3. 
	
  3. 
		           w.translate(x,y);  
    4. 
	
  4. 
		           w.rotate(carAlpha);  
    5. 
	
  5. 
		           w.strokeStyle='#3300FF';  
    6. 
	
  6. 
		           w.lineWidth=1;  
    7. 
	
  7. 
		           w.fillStyle='#0099FF';  
    8. 
	
  8. 
		           w.beginPath();  
    9. 
	
  9. 
		           w.arc(0,0,radius,0,2*Math.PI,false);  
    10. 
	
  10. 
		           w.fill();  
    11. 
	
  11. 
		           w.closePath();  
    12. 
	
  12. 
		           w.beginPath();  
    13. 
	
  13. 
		           w.moveTo(radius,0);  
    14. 
	
  14. 
		           w.lineTo(-radius,0);  
    15. 
	
  15. 
		           w.stroke();  
    16. 
	
  16. 
		           w.closePath();  
    17. 
	
  17. 
		           w.beginPath();  
    18. 
	
  18. 
		           w.moveTo(0,radius);  
    19. 
	
  19. 
		           w.lineTo(0,-radius);  
    20. 
	
  20. 
		           w.stroke();  
    21. 
	
  21. 
		           w.closePath();  
    22. 
	
  22. 
		           w.restore();   
    23. 
	
  23. 
		        } 
    24. 




	由于原理简单，并且代码中作了详细注释，这里就不一一讲解！

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机