HTML5 Canvas动画效果演示

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 contextvar started = false;var mText_canvas = null;var x = 0, y =0;var frame = 0; // 22 5*5 + 2var 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 rectangelctx = 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 imagevar 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 robinpx = 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动画效果演示相关推荐

html动画的原理,HTML5 Canvas动画效果实现原理
在线演示使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, ...
canvas动画科技园_7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
HTML5 Canvas动画效果实现原理
在线演示使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
html5的canvas动画效果,HTML5 Canvas：制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效
原标题:8款惊艳的HTML5粒子动画特效 HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但 ...

HTML5 Canvas动画效果演示

HTML5 Canvas动画效果演示相关推荐

最新文章

热门文章