欲看效果请下载后用Chrome浏览器打开index.html观看，下载地址：https://files.cnblogs.com/files/xiandedanteng/51-NewRunningDog.rar

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>奔跑的狗 19.3.3 12:09</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">
<!--
var ctx;// 绘图环境
var cds;// 从大图中取小图的左边组
var img;// 大图

function draw(){
	var canvas=document.getElementById('myCanvus');

	canvas.width=130;
	canvas.height=100;

	ctx=canvas.getContext('2d');

	img=new Image();
	img.src="runingDog.jpg";

	// 图块坐标
	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'}
   ];

	animate();
};

var index=130;
var i=0;

function animate(){
	ctx.clearRect(0,0,130,110);// 清除图案
	ctx.strokeStyle = "black";

	// 绘制地面
	ctx.beginPath();
	ctx.moveTo(0, 70);
	ctx.lineTo(ctx.width,70);
	ctx.stroke();
	ctx.closePath();

	index++;
	if(index>108){
		index=0;
	}
	i=index % 6;

	// 截取一块图贴上
	ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height);	

	setTimeout( function(){
		window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
	}, 0.35 * 1000 );// 延时350毫秒执行
}

//-->
</script>

　　

[Canvas]New Running Dog的更多相关文章

  1. python基础之面对对象

    Python3 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触 ...

  2. Python学习笔记 for windows 二

    函数 abs(-20)                                        //结果为:20,绝对值函数 def 函数名称([参数1,参数2,参数3]): 执行语句 retu ...

  3. python基础——继承和多态

    python基础——继承和多态 在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类 ...

  4. js 实现继承相关

    ☊ [要求]:实现一个Animal类, 和一个继承它的Dog类 ☛ [实现]: function Animal(name) { this.name = name; } Animal.prototype ...

  5. python的最最最最最基本语法（3）

    模块:在Python中,一个.py文件就称之为一个模块(Module). 为了避免模块名冲突,Python又引入了按目录来组织模块的方法,称为包(Package).例如两个名不hello.py的模块分 ...

  6. javascript oo实现（转）

    javascript oo实现 By purplebamboo 7月 13 2014 更新日期:8月 21 2014 文章目录 1. 原始时代最简单的oo实现 2. 石器时代的oo实现 3. 工业时代 ...

  7. python 继承和多态

    在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Supe ...

  8. Slow Server? This is the Flow Chart You're Looking For--reference

    Your high-powered server is suddenly running dog slow, and you need to remember the troubleshooting ...

  9. Day-8： 面对对象编程

    面对过程的程序设计方法意在将函数分成子函数,再依次调用这些函数来解决问题. 而面对对象的程序设计方法,来源于自然界,类是实例的抽象,实例是类的具体.自定义出来的对象是类,而所有的数据都可以看成是对象, ...

随机推荐

  1. 手把手教你使用C#操作SQLite数据库，新建数据库，创建表，插入，查询，删除，运算符，like

    目录: 一.新建项目,添加引用 二.创建数据库 三.创建表 四.插入数据  五.查询数据  六.删除数据  七.运算符 八.like语句 我的环境配置:windows 64,VS,SQLite(点击下 ...

  2. Asp.net core使用IIS在windows上进行托管

    摘要 最近项目中,尝试使用asp.net core开发,在部署的时候,考虑现有硬件,只能部署在windows上,linux服务器暂时没有. 部署注意事项 代码中启用iis和Kestrel public ...

  3. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...

  4. Javascript:原型模式类继承

    原型模式 每个函数(准确说不是类.对象)都有一个prototype属性,这个属性是一个指针,指向一个对象. 使用原型对象的好处是可以让所有对象实例共享它包含的属性和方法.   1.原型对象 (1)当创 ...

  5. JAVA card 应用开发（二） 在项目添加APPLET

    在上篇博文中.<JAVA card 应用开发创建第一个APPLET>.介绍了一个项目从无到有. 那么.我们建立了这个项目后,仅仅有一个应用(一个可选AID),假设我希望这个项目能够有多个应 ...

  6. Swift - transform.m34动画示例

    Swift - transform.m34动画示例 效果 源码 https://github.com/YouXianMing/Swift-Animations // // CATransform3DM ...

  7. 能添加图标的label

    能添加图标的label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 IconEdgeInsetsLabel // / ...

  8. win7凭据管理、win7多用户远程登录、主机头设置、nuget.org无法访问

    前言  最近遇到的几个问题,然后处理在此对处理方式进行记录一下. 1.服务器共享文件夹,在本机进行访问登录时,每次登录或者每次开机进入都要进行登录的权限认证,这样很麻烦. 2.服务器难免会有多用户同时 ...

  9. ios成长之每日一遍(day 5)

    iOS 屏幕方向那点事儿http://zhenby.com/blog/2013/08/20/talk-ios-orientation/ 针对当前的屏幕方向进行对应的代码布局 BIDViewContro ...

  10. SVG.js 引用获取整理

    一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fil ...