当前位置: 首页 > 编程笔记 >

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

蒋寒
2023-03-14
本文向大家介绍javascript+HTML5的Canvas实现Lab单车动画效果,包括了javascript+HTML5的Canvas实现Lab单车动画效果的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Javascript HTML5 Canvas实现的一个画板,包括了Javascript HTML5 Canvas实现的一个画板的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助。

  • 本文向大家介绍JavaScript+html5 canvas制作的圆中圆效果实例,包括了JavaScript+html5 canvas制作的圆中圆效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于js特效相关内容感兴趣的读者可查看本站专题:《j

  • 本文向大家介绍JavaScript+html5 canvas绘制的小人效果,包括了JavaScript+html5 canvas绘制的小人效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas.js代码如下: 更多关于js特效相关内容

  • 实现效果 用 HTML5 中的 Canvas 的路径绘制实现一个绘画板,可供鼠标画画,颜色呈彩虹色渐变,画笔大小同样呈渐变效果。这部分不涉及 CSS 内容,全部由 JS 来实现。在线体验请看这个链接。 涉及特性 Canvas: 基本属性 getContext() strokeStyle fillStyle lineCap lineJoin 路径绘制 beginPath() lineTo() mov

  • 本文向大家介绍JavaScript html5 canvas绘制时钟效果,包括了JavaScript html5 canvas绘制时钟效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考,具体如下:  HTML部分: JavaScript部分: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍javascript HTML5 canvas实现打砖块游戏,包括了javascript HTML5 canvas实现打砖块游戏的使用技巧和注意事项,需要的朋友参考一下 本文实例编写的一个小游戏,基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库