从一张图上截取不同图块，动态显示在canvas上，形成赛跑的效果。完整代码图片下载请点击 https://files.cnblogs.com/files/xiandedanteng/turtleSheepRace.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="1000px" height="150px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');

    canvas.width=1000;
    canvas.height=150;

    var context=canvas.getContext('2d');

    var img=new Image();
    img.src="walkingAnimals.jpg";

    //  乌龟图块坐标
    var turtleCds=[
        {'x':'10','y':'10','width':'110','height':'80'},
        {'x':'120','y':'10','width':'110','height':'80'},
        {'x':'230','y':'10','width':'110','height':'80'},
        {'x':'340','y':'10','width':'110','height':'80'},
    ];

    //  绵羊图块坐标
    var sheepCds=[
        {'x':'10','y':'100','width':'110','height':'100'},
        {'x':'120','y':'100','width':'100','height':'100'},
        {'x':'224','y':'100','width':'110','height':'100'},
        {'x':'330','y':'100','width':'110','height':'100'},
    ];

    loop=setInterval(function(){ run(context,img,turtleCds,sheepCds); }, 100);
};

var turtleSpeed=-80;
var sheepSpeed=-100;
var i=0;
function run(context,img,turtleCds,sheepCds){
    context.clearRect(0,0,1000,150);// clearScreen
    context.strokeStyle = "black";

    turtleSpeed++;
    if(turtleSpeed-80>1000){
        turtleSpeed=-80;
    }

    i=turtleSpeed % 4;

    sheepSpeed+=1.5;
    if(sheepSpeed-100>1000){
        sheepSpeed=-100;
    }

    // 截取一块图贴上
    context.drawImage(img,turtleCds[i].x,turtleCds[i].y,turtleCds[i].width,turtleCds[i].height,turtleSpeed,50,turtleCds[i].width,turtleCds[i].height);
    context.drawImage(img,sheepCds[i].x,sheepCds[i].y,sheepCds[i].width,sheepCds[i].height,sheepSpeed,50,sheepCds[i].width,sheepCds[i].height);
}

//-->
</script>

HTML5 Canvas 龟羊赛跑的更多相关文章

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

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

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

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

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

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

  4. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

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

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

  7. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  8. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. 强引用（StrongReference）、弱引用（WeakReference）、软引用（SoftReference）、虚引用（PhantomReference）

    1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.如下: Object o=new Object(); // 强引用 当内存空间 ...

  2. .net 过滤 sql防注入类，省地以后每次都要重新弄！

    /// <summary>    /// 过滤不安全的字符串    /// </summary>    /// <param name="Str"&g ...

  3. Jquery插件使用 焦点图插件 MyFocus ，另外记录一款插件 KinMaxShow大背景图插件。

    以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript">     ...

  4. Python数据结构——栈

    栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶.栈被称为一种后入先出(LIFO,last-in-first-out)的数据结构. 由于栈具有后入先出的特点,所以任何不在栈顶的元素 ...

  5. UVA 753 A Plug for UNIX

    最大流解决 . 设置源点 0,连接所有设备(device) .设备-插头 -汇点 #include <map> #include <set> #include <list ...

  6. 4.创建OpenStack的node环境脚本

    创建OpenStack的node环境脚本 使用source admin-openrc.sh来运行脚本 在任意目录下创建admin-openrc.sh文件 vim ~/admin-openrc.sh e ...

  7. WIN32窗口程序

    // Win32.cpp : 定义应用程序的入口点. // #include "stdafx.h" #include "Win32.h" void TRACE( ...

  8. .apache.commons.io 源代码学习（一）

    java的初学者,准备通读各种高水平源代码,提升能力. 为了避免自己的惰性,写博客. 版本:2.5 开发平台:netbeans. 今天是第一天,网上先看个例子:http://www.importnew ...

  9. hdu 3264(枚举+二分+圆的公共面积)

    Open-air shopping malls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  10. 第一章：1-10、试在下列条件下比较电路交换和分组交换。要传送的报文共x（bit），从源站到目的站共经过k段链路，每段链路的传播时延为d（s），数据率为C（bit/s）。在电路交换时电路的建立时间为s（s）。在分组交换时分组长度为p（bit），且各结点的排队等待时间可忽略不计。问在怎样的条件下，分组交换的时延比电路交换的要小？

    <计算机网络>谢希仁著第四版课后习题答案答:对电路交换,当t=s时,链路建立: 当t=s+x/C,发送完最后一bit:                 当t=s+x/C+kd,所有的信息到 ...