码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 Canvas 奔跑的小狗

时间:2017-09-06 10:12:55      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:nload   div   head   char   func   UI   效果   loop   oop   

技术分享

技术分享

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

 

HTML5 Canvas 奔跑的小狗

标签:nload   div   head   char   func   UI   效果   loop   oop   

原文地址:http://www.cnblogs.com/xiandedanteng/p/7482784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!