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

  1. 一款由html5 canvas实现五彩小圆圈背景特效

    之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码 ...

  2. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  3. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  5. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  6. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】

    HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  9. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

随机推荐

  1. FOJ ——Problem 1759 Super A^B mod C

     Problem 1759 Super A^B mod C Accept: 1368    Submit: 4639Time Limit: 1000 mSec    Memory Limit : 32 ...

  2. linux下有的目录有可执行权限

    在linux里面,目录也是一个文件.权限设置方法与普通文件一样.目录的可执行权限:目录无所谓执行不执行,目录只能否被开启(也称作“遍历”或“搜索”)对目录的执行权限不仅意味着查看目录下文件名还允许查看 ...

  3. 小Z爱图论（NOIP信（sang）心（bin）赛）From FallDream

    题目: 小Z最近喜欢上了图论,于是他研究了一下图的连通性问题.但是他遇到了一个难题. 给定一个n个点的有向图,求有多少点对(i,j)满足从i点出发能到达点j ? 小Z仅会简单的朴素算法,所以他想问问你 ...

  4. /proc/sys/shm/drop_caches

    author:skate time:2012/02/22 手工释放linux内存--/proc/sys/vm/drop_cache 转载一篇文章 linux的内存查看: [root@localhost ...

  5. Windows基础-使用XAudio2播放音频（本质是WASAPI）

    对于常见的音频播放,使用XAudio2足够了. 时间是把杀猪刀,滑稽的是我成了猪 早在Windows Vista中,M$推出了新的音频架构UAA,其中的CoreAudio接替了DSound.WaveX ...

  6. WPF+MVVM数据绑定问题集锦

    1.  数据绑定的问题 在使用数据绑定时,一般使用 ObservableCollection<T> 类,不使用list列表集合,因为list数据发生变化时,UI界面不更新,而Observa ...

  7. Appium+python自动化9-SDK Manager【转载】

    前言 SDK Manager到有哪些东西是必须安装的呢? 一.SDK Manager 1.双击打开SDK Manager界面

  8. CentOS7.0使用Yum安装Nginx

    安装Nginx yum install nginx 正常情况下必定是: 已加载插件:fastestmirror, langpacks base | 3.6 kB 00:00:00 docker-mai ...

  9. 通过GitHub部署项目到Nginx服务器

    1.更新源: 2.安装nginx 3.安装成功 4.DNS域名解析 5.访问域名就会找到相应IP地址的主机,一个IP可对应多个域名 6.提交到gitHub 复制这两行 填上邮箱和密码 7.提交成功 8 ...

  10. 这篇 感觉很实用--DJANGO ORM

    Django之model F/Q以及多对多操作 http://www.cnblogs.com/ccorz/p/5882400.html model之F/Q操作 F操作,使用查询条件的值 打个比方吧,有 ...