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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
PHP调用三种数据库的方法(1)
2006/10/09 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
javascript数组去掉重复
2011/05/12 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
利用Python开发实现简单的记事本
2016/11/15 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python 在函数上添加包装器
2020/07/28 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
2014春晚主持词
2014/03/25 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
水知道答案观后感
2015/06/08 职场文书
演讲比赛主持词
2015/06/29 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js