HTML5 Canvas动画效果演示

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间

间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout( update, 1000/30);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

一个22帧的大雁飞行图片实现的效果：

源图像：

程序代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="chrome=IE8">

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Canvas Mouse Event Demo</title>

<link href="default.css" rel="stylesheet" />

	<script>

		var ctx = null; // global variable 2d context

		var started = false;

		var mText_canvas = null;

		var x = 0, y =0;

		var frame = 0; // 22 5*5 + 2

		var imageReady = false;

		var myImage = null;

		var px = 300;

		var py = 300;

		var x2 = 300;

		var y2 = 0;

		window.onload = function() {

			var canvas = document.getElementById("animation_canvas");

			console.log(canvas.parentNode.clientWidth);

			canvas.width = canvas.parentNode.clientWidth;

			canvas.height = canvas.parentNode.clientHeight;

			if (!canvas.getContext) {

			    console.log("Canvas not supported. Please install a HTML5 compatible browser.");

			    return;

			}

			// get 2D context of canvas and draw rectangel

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

			ctx.fillStyle="black";

			ctx.fillRect(0, 0, canvas.width, canvas.height);

			myImage = document.createElement('img');

			myImage.src = "../robin.png";

			myImage.onload = loaded();

		}  

		function loaded() {

		    imageReady = true;

		    setTimeout( update, 1000/30);

		}

		function redraw() {

			ctx.clearRect(0, 0, 460, 460)

			ctx.fillStyle="black";

			ctx.fillRect(0, 0, 460, 460);

			// find the index of frames in image

			var height = myImage.naturalHeight/5;

			var width = myImage.naturalWidth/5;

			var row = Math.floor(frame / 5);

			var col = frame - row * 5;

			var offw = col * width;

			var offh = row * height;

			// first robin

			px = px - 5;

			py = py - 5;

			if(px < -50) {

				px = 300;

			}

			if(py < -50) {

				py = 300;

			}

			//var rate = (frame+1) /22;

			//var rw = Math.floor(rate * width);

			//var rh = Math.floor(rate * height);

			ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);

			// second robin

			x2 = x2 - 5;

			y2 = y2 + 5;

			if(x2 < -50) {

				x2 = 300;

				y2 = 0;

			}

			ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);

		}

		function update() {

		    redraw();

		    frame++;

		    if (frame >= 22) frame = 0;

		    setTimeout( update, 1000/30);

		}

	</script>

</head>

<body>

	<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>

	<pre>Play Animations</pre>

	<div id="my_painter">

		<canvas id="animation_canvas"></canvas>

	</div>

</body>

</html>

发现上传透明PNG格式有点问题，所以我上传

不透明的图片。可以用其它图片替换，替换以后

请修改最大帧数从22到你的实际帧数即可运行。

HTML5 Canvas动画效果演示的更多相关文章

  1. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  2. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  3. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  4. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  5. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  6. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  7. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  8. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

随机推荐

  1. 一位IT行业高收入者的理财规划方案

    一位IT行业高收入者的理财规划方案 http://zhuanlan.zhihu.com/invest/19670220 Alex · 12 天前 回望2013,这一年是极其不寻常的.理财浪潮席卷大江南 ...

  2. percona-xtrabackup安装及使用教程

    安装percona-xtrabackup依赖包(前提已安装mysql) yum -y install perl-CPAN perl-DBD-MySQL perl make gcc gcc-c++ pa ...

  3. android usb Host模式下与usb Hid 设备的通信

    做android 与USB HID设备的通信有段时间了,总结一下遇到的问题和解决方法: 1,第一次遇到的问题:android 版本低不支持usb hid, 被要求做相关项目的时候,就从mUsbMana ...

  4. VC2008下CRichEditView加载RichEdit4.1版本（还有一些类似的文章）

         在之前的文章<RichEdit 各个版本介绍>中,写到RichEdit已经到达6.0版本了,而我们经常编程使用的却还是2.0,在vc6.0中甚至还使用1.0版本,更高的版本修复了 ...

  5. VCL+FMX 双剑合壁编程

    VCL 是经典,FMX 是新生,新生事物总会带来一些好玩新奇的东西.舍弃经典是浪费,不了解新生事物是等死,那么我们来一个二合一双剑合壁又如何呢? 要双剑合壁,就得投些机,取些巧.由于 Delphi / ...

  6. VC多文档编程技巧（取消一开始时打开的空白文档）

    VC多文档编程技巧(取消一开始时打开的空白文档) http://blog.csdn.net/crazyvoice/article/details/6185461 VC多文档编程技巧(取消一开始时打开的 ...

  7. OpenCV学习笔记：如何扫描图像、利用查找表和计时

    目的 我们将探索以下问题的答案: 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 这里我们测试的,是一种简单的 ...

  8. 加快VisualStudio的开发速度--VS的一些开发技巧

    最近不得不使用VisualStudio来进行一些开发,用习惯了Eclipse,感觉VS很难上手,不过通过google,把VS进行Eclipse化,顺便记录下来,以防忘记. 1)显示文字的自动完成. 改 ...

  9. 转自 z55250825 的几篇关于FFT的博文（三）

    题目大意:给出n个数qi,定义 Fj为        令 Ei=Fi/qi,求Ei.      其实这道题就是看到有FFT模板才觉得有必要学一下的...    所以实际上就是已经知道题解了... = ...

  10. Android 中HttpClient和HttpURLConnection选取

    原文地址:http://android-developers.blogspot.com/2011/09/androids-http-clients.html 译文:http://yunfeng.sin ...