在这里，使用HTML5的单车动画实现，运行效果你懂的，但不要在IE8，测试没有效果。请在浏览器支持最新的html3和CSS3测试它，祝你好运。
运行效果的截图如下：
具体代码如下：
帆布实验室单车动画，HTML5动画
无功framecounter = 800； / /为了完成作业，不要脸，设置变量来......
var方向= 左；
功能drawbikebody（）{
VaR的画布document.getelementbyid（'dianal）；
VaR上下文= canvas.getcontext（二维的）；
context.linewidth = 3；
Context.beginPath（）；
Context.moveTo（0,0）；
Context.lineTo（150,0）；
Context.lineTo（100100）；
Context.closePath（）；
Context.moveTo（100100）；
Context.lineTo（200,75）； / /后点车轮轴承
Context.lineTo（150,0）；
在那下面的一英尺
Context.moveTo（100100）；
Context.lineTo（110120）；
Context.lineTo（120120）；
Context.moveTo（110120）；
Context.lineTo（100120）；
/另一只脚
Context.moveTo（100100）；
Context.lineTo（90,80）；
Context.lineTo（100,80）；
Context.moveTo（90,80）；
Context.lineTo（80）；
/一个座位
Context.moveTo（150,0）；
context.lineto（160 - 20）；
context.lineto（175 - 20）；
context.moveto（160 - 20）；
context.lineto（135 - 20）；
/ arm
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，数学。π×2，真的）；
后轮
context.moveto（200 + 75,75）；
context.arc（200,75,75,0，数学。π×2，真的）；
}
功能drawforcepiece1（）{
VaR的画布document.getelementbyid（'dianal）；
VaR上下文= canvas.getcontext（二维的）；
Context.beginPath（）；
对于（var i = framecounter；i < framecounter + 360；I = 20）{
Context.moveTo（- 35.5,75）；
x = math.cos（math.pi / 180 *）* 75 +（- 35.5）；
Y = Math.sin（math.pi / 180 *）* 75 + 75；
Context.lineTo（x，y）；
}
}
功能drawforcepiece2（）{
VaR的画布document.getelementbyid（'dianal）；
VaR上下文= canvas.getcontext（二维的）；
Context.beginPath（）；
对于（var i = framecounter；i < framecounter + 360；I = 20）{
Context.moveTo（200,75）；
x = math.cos（math.pi / 180 *）* 75 + 200；
Y = Math.sin（math.pi / 180 *）* 75 + 75；
Context.lineTo（x，y）；
}
}
功能drawbike（）{
VaR的画布document.getelementbyid（'dianal）；
VaR上下文= canvas.getcontext（二维的）；
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（）；
如果（方向=左）{
framecounter --；
其他{ }
framecounter + +；
}
}
函数移动（）{
VaR区间= setInterval（）函数（）{
drawbike（）；
}，10）；
}
Window.addEventListener（负荷
请更新您的Brower到最新的版本！
复位
左
赖特
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。
