javascript HTML5的帆布实现工党单车动画效果

本文实例讲述了javascript HTML5的帆布实现工党单车动画效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

具体代码如下：

超文本标记语言标题画布实验室单车动画，HTML5动画/标题/标题脚本类型=' text/JavaScript ' var帧计数器=800；//为了完成作业，无耻了点，在这里设置变量…… var方向="左";函数drawinbikebody(){ var canvas=document。getelementbyid('对角线');var上下文=canvas。get context(' 2d ')；语境。线宽=3；语境。begin path()；context.moveTo(0，0)；context.lineTo(150，0)；context.lineTo(100，100)；语境。close path()；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，真);//后轮context.moveTo(200 75，75)；上下文.弧(200，75，75，0，数学.PI*2，真);}函数draw force piece 1(){ var canvas=document。getelementbyid('对角线');var上下文=canvas。get context(' 2d ')；语境。begin path()；for(var I=帧计数器；我帧计数器360;i=20) { context.moveTo(-35.5，75)；x=数学cos(数学/180 * I)* 75(-35.5)；y=数学/180 * I)* 75 75；context.lineTo(x，y)；} }函数draw force piece 2(){ var canvas=document。getelementbyid('对角线');var上下文=canvas。get context(' 2d ')；语境。begin path()；for(var I=帧计数器；我帧计数器360;i=20) { context.moveTo(200，75)；x=数学cos(数学/180 * I)* 75 200；y=数学/180 * I)* 75 75；context.lineTo(x，y)；} }函数draw bike(){ var canvas=document。getelementbyid('对角线');var上下文=canvas。get context(' 2d ')；context.clearRect(0，0，800，600)；语境。save()；context.translate(framecounter，300)；drawBikeBody()；语境。笔画()；语境。restore()；语境。save()；context.translate(framecounter，300)；draw force piece 1()；语境。笔画()；语境。restore()；语境。save()；context.translate(framecounter，300)；draw force piece 2()；语境。笔画()；语境。restore()；如果(方向===' left '){帧计数器-；} else { frame counter } } function move(){ var interal=setInterval(function(){ draw bike()；}, 10);} window.addEventListener('load '，move，true)；/script正文画布id='对角线宽度=' 800 '高度=' 600 '样式='边框：1 px虚线'请将浏览器更新到最新版本！/canvas br按钮id=' reset ' onclick=' frame counter=800；重置/按钮按钮id='左onclick='方向='左' '向左走/按钮按钮id='右onclick='方向='真' '向右走/按钮/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。