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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jquery 上下滚动广告
Jun 17 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
node网页分段渲染详解
2016/09/05 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
python统计文本文件内单词数量的方法
2015/05/30 Python
python实现微信自动回复功能
2018/04/11 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
小学优秀班主任材料
2014/12/17 职场文书
网络妈妈观后感
2015/06/08 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Python函数中apply、map、applymap的区别
2021/11/27 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers
实现GO语言对数组切片去重
2022/04/20 Golang