效果如上图，共六个图像切换，形成小狗动态奔跑效果。完整代码和图片请从 https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载。
代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>奔跑的狗</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="130px" height="100px" style="border:1px dashed black;">
出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById(‘myCanvus‘);
canvas.width=130;
canvas.height=100;
var context=canvas.getContext(‘2d‘);
var img=new Image();
img.src="runingDog.jpg";
// 图块坐标
var cds=[
{‘x‘:‘50‘,‘y‘:‘30‘,‘width‘:‘130‘,‘height‘:‘70‘},
{‘x‘:‘190‘,‘y‘:‘30‘,‘width‘:‘130‘,‘height‘:‘70‘},
{‘x‘:‘320‘,‘y‘:‘30‘,‘width‘:‘130‘,‘height‘:‘70‘},
{‘x‘:‘60‘,‘y‘:‘110‘,‘width‘:‘130‘,‘height‘:‘70‘},
{‘x‘:‘190‘,‘y‘:‘110‘,‘width‘:‘130‘,‘height‘:‘70‘},
{‘x‘:‘310‘,‘y‘:‘110‘,‘width‘:‘130‘,‘height‘:‘70‘}
];
loop=setInterval(function(){ run(context,img,cds); }, 1000);
};
var index=130;
var i=0;
function run(context,img,cds){
context.clearRect(0,0,130,110);// 清除图案，注意这里写canvas.width，canvas.height页面会有残留,直接写数值比较好
context.strokeStyle = "black";
// 地面
context.beginPath();
context.moveTo(0, 70);
context.lineTo(context.width,70);
context.stroke();
context.closePath();
index++;
if(index>108){
index=0;
}
i=index % 6;
// 截取一块图贴上
context.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height);
}
//-->
</script>
时间： 2024-10-22 21:44:07