HTML5 Canvas 奔跑的小狗

更新时间：2022-09-22 13:09:10

HTML5 Canvas 奔跑的小狗

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

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7482784.html，如需转载请自行联系原作者

上一篇 : ：React Native填坑之旅--class（番外篇）下一篇 : 五年匠心打造，颐高转型巨作献礼新年1

HTML5 Canvas 奔跑的小狗

相关阅读

推荐文章