javascript+HTML5的Canvas實現Lab單車動畫效果

更新時間：2015年08月07日 12:09:07 作者：皮蛋

這篇文章主要介紹了javascript+HTML5的Canvas實現Lab單車動畫效果,涉及javascript使用Canvas配合數學運算實現自行車動畫效果,需要的朋友可以參考下

本文實例講述了javascript+HTML5的Canvas實現Lab單車動畫效果。分享給大家供大家參考。具體如下：

這里運用HTML5實現的單車動畫，運行一下效果你就明白了，不過不要在IE8下測試，沒效果的。請在支持最新HTML3和CSS3的瀏覽器下測試，祝您好運。

運行效果截圖如下：

具體代碼如下：

<html>
<head>
<title>Canvas Lab單車動畫，HTML5動畫</title>
</head>
 <script type="text/javascript">
  var framecounter = 800;//為了完成作業(yè)，無恥了點，在這里設置變量……
  var direction = "left";
  function drawBikeBody () {
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.lineWidth = 3;
   context.beginPath();
   context.moveTo(0,0);
   context.lineTo(150,0);
   context.lineTo(100,100);
   context.closePath();
   context.moveTo(100,100);
   context.lineTo(200,75);//后輪軸承點
   context.lineTo(150,0);
   //下面那個一個腳踏
   context.moveTo(100,100);
   context.lineTo(110,120);
   context.lineTo(120,120);
   context.moveTo(110,120);
   context.lineTo(100,120);
   //另一個腳踏
   context.moveTo(100,100);
   context.lineTo(90,80);
   context.lineTo(100,80);
   context.moveTo(90,80);
   context.lineTo(80,80);
   //座包
   context.moveTo(150,0);
   context.lineTo(160,-20);
   context.lineTo(175,-20);
   context.moveTo(160,-20);
   context.lineTo(135,-20);
   //扶手
   context.moveTo(0,0);
   context.lineTo(15,-30);
   context.lineTo(10,-35);
   context.lineTo(20,-40);
   context.lineTo(40,-40);
   //前輪軸承
   context.moveTo(0,0);
   context.lineTo(-35.5,75);//前輪軸承點
   //前輪
   context.moveTo(75-35.5,75);//去掉這個目測不行啊，貌似context.arc()方法里有l(wèi)ineTo
   context.arc(-35.5,75,75,0,Math.PI*2,true);
   //后輪
   context.moveTo(200+75,75);
   context.arc(200,75,75,0,Math.PI*2,true);
  }
  function drawForcePiece1(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.beginPath();
   for(var i = framecounter; i < framecounter+360; i += 20) { 
    context.moveTo(-35.5,75);
    x = Math.cos(Math.PI / 180 * i) * 75 + (-35.5); 
    y = Math.sin(Math.PI / 180 * i) * 75 + 75; 
    context.lineTo(x,y);
    }
  }
  function drawForcePiece2(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.beginPath();
   for(var i = framecounter; i < framecounter+360; i += 20) { 
    context.moveTo(200,75);
    x = Math.cos(Math.PI / 180 * i) * 75 + 200; 
    y = Math.sin(Math.PI / 180 * i) * 75 + 75; 
    context.lineTo(x,y);
    }
  }
  function drawBike(){
   var canvas = document.getElementById('diagonal');
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, 800, 600);
   context.save();
   context.translate(framecounter,300);
   drawBikeBody();
   context.stroke();
   context.restore();
   context.save();
   context.translate(framecounter,300);
   drawForcePiece1();
   context.stroke();
   context.restore();
   context.save();
   context.translate(framecounter,300);
   drawForcePiece2();
   context.stroke();
   context.restore();
   if (direction==="left") {
    framecounter--;
   }else{
    framecounter++;
   }
  }
  function move() {
   var interal = setInterval(function () {
  drawBike();
  }, 10);
  }  
  window.addEventListener("load",move,true);
 </script>
 <body>
  <canvas id="diagonal" width="800" height="600" style="border:1px dashed">Please update your brower to the newest version!</canvas>
  <br>
  <button id="reset" onclick="framecounter=800;">Reset</button>
  <button id="left" onclick="direction='left'">Go Left</button>
  <button id="right" onclick="direction='ture'">Go Right</button>
 </body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章: