javascript+HTML5的Canvas实现Lab单车动画效果

2019-11-20 11:53:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果。分享给大家供大家参考。具体如下：

这里运用HTML5实现的单车动画，运行一下效果你就明白了，不过不要在IE8下测试，没效果的。请在支持最新HTML3和CSS3的浏览器下测试，祝您好运。

运行效果截图如下：

具体代码如下：

<html><head><title>Canvas Lab单车动画，HTML5动画</title></head> <script type="text/javascript">  var framecounter = 800;//为了完成作业，无耻了点，在这里设置变量……  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()方法里有lineTo   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程序设计有所帮助。

上一篇：jquery简单实现网页层的展开与收缩效果

下一篇：jQuery实现仿腾讯视频列表分页效果的方法