HTML5 Canvas draw方法制作动画效果示例


Posted in HTML / CSS onJuly 11, 2013

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帧的大雁飞行图片实现的效果:
HTML5 Canvas draw方法制作动画效果示例 
源图像:
HTML5 Canvas draw方法制作动画效果示例 
程序代码:

复制代码
代码如下:

<!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到你的实际帧数即可运行。
HTML / CSS 相关文章推荐
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 #HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 #HTML / CSS
You might like
咖啡常见的种类
2021/03/03 新手入门
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Numpy之reshape()使用详解
2019/12/26 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
元旦文艺汇演主持词
2014/03/26 职场文书
临床专业自荐信
2014/06/22 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
教师工作表现自我评价
2015/03/05 职场文书
社区党员干部承诺书
2015/05/04 职场文书
消防宣传语大全
2015/07/13 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python