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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jquery 使用简明教程
Mar 05 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
浅谈Express异步进化史
Sep 09 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
公司授权委托书样本
2014/09/15 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
党员心得体会范文2016
2016/01/23 职场文书