html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果。这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然后快速的播放它们,在人的眼睛看来就是一个完整的动画效果。
制作canvas动画的基本步骤
下面是你在canvas上绘制一个动画帧的基本步骤:
1、清空canvas:除了背景图像之外,你需要清空之前绘制的所有图形。
2、保存canvas的状态:如果在这一步中你使用了不同的绘图状态(例如描边大小和填充色等),并且你想在绘制每一帧时使用相同的原始状态,你需要保存这些原始状态。
3、绘制动画图形:这一步中你需要绘制那些动画的图形元素。
4、恢复canvas状态:如果你之前保存过canvas的状态,在这一步中将它们恢复。
控制canvas动画
我们需要一种方法来在指定时间内执行我们的绘制图形函数。有两种方式可以控制动画的执行。
第一种是使用下面的三个window对象上的方法:window.setInterval(),window.setTimeout()和window.requestAnimationFrame()。它们都能在指定时间内调用指定的函数。
setInterval(function, delay):在每delay毫秒时间内反复执行function指定的函数。
setTimeout(function, delay):在delay毫秒内执行function指定的函数。
requestAnimationFrame(callback):通知浏览器你需要执行一个动画,并请求浏览器调用指定的函数来在下一次重绘前更新动画。
第二种方法是使用事件监听。例如你需要做一个小游戏,你可以监听键盘和鼠标的事件,然后在捕获相应的事件时使用setTimeout()方法来制作动画效果。
为了获得更好的动画性能,我们通常使用requestAnimationFrame()方法。当浏览器装备好绘制下一帧动画时,我们可以将绘制函数作为参数传入这个方法中。
通过在浏览器准备画下一帧的时候,给浏览器发出信号,可以使浏览器对你的动画进行硬件加速,这比使用setTimeout()来绘制动画效果会好得多。
下面是一段示例代码:
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(animate);
draw();
}
animate()函数首先会获取requestAnimationFrame()函数的一个引用。注意在不同的浏览器中会使用不同的名称。变量reqAnimFrame会在不同的浏览器中设置为不同的值,总之它不能为空。
然后reqAnimFrame()方法被调用,并将animate()函数作为参数传入。当浏览器准备好绘制下一帧动画时,animate()函数就会被调用。
最后,animate()函数会调用draw()方法。draw()方法在上面的代码中没有写出来,它实际上做的事情就是前面提到的绘制一个动画帧的4个步骤:清空canvas,保存状态,绘制图形,恢复状态。
还有一件需要注意的事情是animate()函数必须被调用一次来启动动画,否则requestAnimationFrame()函数将永远不会被调用,动画也不会被正常执行。
下面是一个小例子:一个小矩形在canvas中来回不停的运动。
你的浏览器不支持HTML5 Canvas!
上面canvas动画的实现代码如下:
var x = 0;
var y = 15;
var speed = 5;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(animate);
x += speed;
if(x <= 0 || x >= 475){
speed = -speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 25, 25);
}
animate();
canvas动画示例
下面是一个地球绕太阳以及月亮绕地球旋转的canvas动画效果。
你的浏览器不支持HTML5 Canvas!
上面效果的实现代码如下:
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
sun.src = 'img/Canvas_sun.png';
moon.src = 'img/Canvas_moon.png';
earth.src = 'img/Canvas_earth.png';
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(drawSolarSystem);
}
function drawSolarSystem () {
var ctx = document.getElementById('ex2').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300); // clear canvas
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
// Earth
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
ctx.translate(105,0);
ctx.fillRect(0,-12,50,24); // Shadow
ctx.drawImage(earth,-12,-12);
// Moon
ctx.save();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
ctx.stroke();
ctx.drawImage(sun,0,0,300,300);
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(drawSolarSystem);
}
init();
接下来的例子是一个模拟时钟动画的例子。
你的浏览器不支持HTML5 Canvas!
模拟时钟动画的实现代码如下:
function clock(){
var now = new Date();
var ctx = document.getElementById('ex3').getContext('2d');
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// Hour marks
ctx.save();
for (var i=0;i<12;i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
ctx.fillStyle = "black";
// write Hours
ctx.save();
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(83,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(95,0,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(clock);
}
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
reqAnimFrame(clock);
html5的canvas动画效果,HTML5 Canvas:制作动画特效相关推荐
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开 效 ...
- Unity进阶 - 动画系统 - 给人物角色制作动画
Unity进阶 - 动画系统 - 给人物角色制作动画(点击免费试学本节) 上一篇文章,我们对Unity进阶 - 动画系统 - Mecanim动画系统有了一定的认识,本节课我们给人员角色制作一些简单的动 ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画 通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...
- html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
- 【Android笔记25】Android中的动画效果之逐帧动画
这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录 一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html怎么打开时出现动画效果,html5动画制作打开抽出卡片动画效果代码
特效描述:html5动画 打开抽出 卡片动画效果.抽出卡片特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Sample paper Lorem ipsum dolor sit a ...
- html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
最新文章
- rabbitmq 限制速度_技术干货分享:RabbitMQ消息积压的几种解决思路
- 弧度转为角分秒的c语言程序_用弧度表示角度
- jQuery中选择器加尖括号的区别
- JavaWeb生成图片验证码
- mysql身份验证失败_SMTP身份验证失败PAM-MySQL无法进行身份验证
- android 蒙版图片带拖动_黑橙修图:新手入门篇2-一句话带你认识图层蒙版
- 自定义 Java Annotation ,读取注解值
- Android存储--SharedPreferences
- linux服务器知识学习:linux简介与linux的发行版
- Yc 变量的交换(C语言谭浩强第五版第二章习题4.1为例)
- JSONObject.fromObject爆红,显示无fromObject方法
- FFmpeg再学习 -- Linux 安装说明
- 政府大数据资源中心建设总体方案 PPT
- JS实现新年倒计时动画特效+音乐案例
- 水泥行业超低排放政策频发,企业如何完成超低排放改造?
- android共享局域网打印,Android 浅谈同一局域网下使用WiFi连接打印机
- SBUF数据缓冲寄存器
- 地铁杂记 - 风寒咳嗽
- 超详细【Uboot驱动开发】(一)uboot基础了解
- android 解压缩mac zip压缩文件