图片的小车平移动画代码
js代码：
// JavaScript Document
var cav=document.getElementById("cav").getContext("2d");
var i=0;
function go(){
if(i<69){
cav.clearRect(50,400,150,150);//清空出一块矩形
var img =new Image();
img.src="img/car.png";//图形路径
img.onload=function (){//当图片被加载时，执行此函数
//绘制img图形，图形起点坐标为（50,500），宽高都为50像素
cav.drawImage(img,50,400,150,150);
}
cav.translate(10,0);//画布向右平移10像素
i++;
}
if(i==69){
alert("前方没路了，不能再前进了")
}}html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>绘制平移效果图形</title> </head> <link href="css/style.css" type="text/css" rel="stylesheet"> <body> <div class="mr-cont"> <canvas id="cav" height="600" width="800"></canvas> <input type="button" onClick="go()" value="前进"> </div> </body> <script src="js/js.js"></script> </html>
css代码：
@charset "utf-8";
/* CSS Document */
.mr-cont {
width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
border: 1px solid #f00;
}
canvas {
background: url(../img/bg.jpg);
}
input{
position: absolute;
height: 30px;
width: 60px;
top:560px;
font-size:18px;
background: rgba(61,232,229,1.00);
border: 1px solid rgba(61,232,229,1.00);
border-radius: 5px;
}图片
解析js代码：
让我逐行详细讲解这段小车平移的 JavaScript 代码：
var cav=document.getElementById("cav").getContext("2d");获取 HTML 中 ID 为 "cav" 的 <canvas> 元素，并获取其 2D 渲染上下文。cav 变量现在可以用来在画布上绘制图形。
var i=0;
定义一个计数器变量 i，用于记录小车移动的步数，初始值为 0。
function go(){定义 go 函数，用于控制小车的移动过程。
if(i<69){判断移动步数是否小于 69，如果满足条件则继续执行移动逻辑。
cav.clearRect(50,400,150,150);//清空出一块矩形
清除画布上从坐标 (50,400) 开始的 150×150 像素矩形区域。这个矩形区域是预先设定的，用于清除小车可能覆盖的区域。
var img =new Image(); img.src="img/car.png";//图形路径
创建一个新的 Image 对象，设置其源图片路径为 "img/car.png"。
img.onload=function (){当图片加载完成后执行回调函数。
cav.drawImage(img,50,400,150,150);
将加载好的小车图片绘制到画布上，绘制位置为 (50,400)，宽高都为 150 像素。这里是强制缩放到150*150的区域里
}
结束图片加载完成后的回调函数。
cav.translate(10,0);//画布向右平移10像素
将画布坐标系向右平移 10 像素。这会影响后续所有绘制操作的坐标位置。
i++;
移动步数计数器加 1。
}
结束 if 条件判断。
if(i==69){判断移动步数是否等于 69。
alert("前方没路了，不能再前进了")当移动到第 69 步时弹出提示框，告知用户不能再前进了。
}}
结束 go 函数定义。