本文实例讲述了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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“javascript+HTML5的Canvas实现Lab单车动画效果”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍