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


Posted in Javascript onAugust 07, 2015

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

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

运行效果截图如下:

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

具体代码如下:

<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 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JS定义类的六种方式详解
May 12 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
详解JavaScript中return的用法
May 08 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于input动态模糊查询的实现方法
Dec 12 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
原生JS实现留言板
Mar 26 Javascript
原生js实现轮播图特效
May 04 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
You might like
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python中xrange用法分析
2015/04/15 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python: 传递列表副本方式
2019/12/19 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Django静态文件加载失败解决方案
2020/08/26 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
JNI的定义
2012/11/25 面试题
如何写出好的Java代码
2014/04/25 面试题
预备党员思想汇报范文
2014/01/11 职场文书
绩效管理实施方案
2014/03/19 职场文书
学校对教师的评语
2014/04/28 职场文书
学校安全防火方案
2014/06/07 职场文书
技术股东合作协议书
2014/12/02 职场文书
古诗之感恩老师
2019/10/24 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
python manim实现排序算法动画示例
2022/08/14 Python