效果如上图，共六个图像切换，形成小狗动态奔跑效果。完整代码和图片请从  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. 牛客小白月赛4——H-相邻的糖果

    链接:https://www.nowcoder.com/acm/contest/134/H来源:牛客网 题目描述 有n个盒子摆成一排,每个盒子内都有ai个糖果. 现在你可以执行以下操作: ·你可以选择 ...

  2. Installing patches on an ESXi 5.x by the command

    Purpose This article outlines the procedure for installing patches on an ESXi 5.x host from the comm ...

  3. 控制属性为multiple的select

    需求:实现点击查询,搜索对应渠道已投放.未投放批次.如图: html: <div class="form-inline margin-top-20"> <div ...

  4. mysql如何更改character-set-server默认为latin1

    运行环境:win10 mysql版本:MYSQL5.7免安装版(或解压版) 今天在学习mysql字符集有关乱码的知识 然后发现了latin1的字符集编码格式,虽然命令行窗口改变很容易,只需两行命令 s ...

  5. 汕头市队赛 SRM13 T3

    这道题可以贪心 维护一个答案队列 枚举位置 每次将比当前位置大的队尾全部替代掉 记录删了多少了就好了 #include<cstdio> #include<iostream> # ...

  6. DotNETCore 学习笔记 Startup、中间件、静态文件

    Application Startup Startup Constructor - IHostingEnvironment - ILoggerFactory ConfigureServices - I ...

  7. SpringBoot设置事务管理

    关于事务就不介绍了,前面在研究spring的时候就已经研究过了,参考:https://www.cnblogs.com/qlqwjy/p/7296493.html 这里直接研究springboot中事务 ...

  8. SpringBoot无XML配置

    SpringBoot,自己研究了好几天,以前也是没有接触过这类的框架,不过原理吧,也就是那么些个原理,毕竟都是Spring开源下的子框架. 好了,回归正题,今天晚上研究了好久,写出来了无配置文件的ja ...

  9. 1.使用python连接odps并获取项目

    from odps import ODPS # 直接从odps模块导入ODPS这个类 # 然后传入相应的参数进行初始化即可 ''' ODPS函数接收的参数如下: access_id: 你的access ...

  10. AC日记——[HAOI2007]覆盖问题 bzoj 1052

    1052 思路: 二分答案: 二分可能的长度: 然后递归判断长度是否可行: 先求出刚好覆盖所有点的矩形: 可行的第一个正方形在矩形的一个角上: 枚举四个角上的正方形,然后删去点: 删去一个正方形后,递 ...