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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
常用js脚本
2006/12/03 Javascript
javascript一点特殊用法
2008/05/28 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python实现全排列的打印
2018/08/18 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python实现猜拳游戏项目
2020/11/30 Python
盛大笔试题
2016/11/05 面试题
校长就职演讲稿
2014/01/06 职场文书
风险评估实施方案
2014/03/09 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android