HTML5 Canvas 奔跑的小狗-优快云博客

本文介绍如何使用HTML5的Canvas API实现小狗动态奔跑的效果。通过六个不同的图像切换，模拟小狗奔跑的动作。提供了完整的HTML和JavaScript代码示例，并包含具体的图像切片和绘制逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如上图，共六个图像切换，形成小狗动态奔跑效果。完整代码和图片请从 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>