javascript+HTML5的Canvas实现Lab单车动画效果

更新时间：2026-04-09 15:59:49作者：yezheng

本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果。分享给大家供大家参考。具体如下：
这里运用HTML5实现的单车动画，运行一下效果你就明白了，不过不要在IE8下测试，没效果的。请在支持最新HTML3和CSS3的浏览器下测试，祝您好运。
运行效果截图如下：

具体代码如下：

<html>

<head>

<title>Canvas Lab单车动画，HTML5动画</title>

</head>

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="right" onclick="direction='ture'">Go Right</button>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。