（19）HTML5-Canvas动画应用
2016-09-03 12:04
369 查看
学完了基础的几何图形绘制与变形，接下来要感受一下canvas处理动画的威力，毕竟游戏美工最重要的就是要让画面动起来，才不会让玩家觉得枯燥乏味。HTML5的画布提供了强大的动画应用函数，应用这些函数播放一连串的静态影格，就可以让画面“动起来”了。
{setinterval}
动画操作的概念是通过快速连续播放无数个静态影格，从通过人类视觉暂留效应达到画面动起来的感觉。因为需要每隔一段时间就会自动执行一次的函数来帮助我们播放影格，javascript所提供的函数setInterval便能达到这样的效果。
setInterval（function，milliseconds）
参数function用来标示每隔一段时间就要播放的函数，通常函数内会定义静态影格变化的逻辑；参数milliseconds则用来定义每隔多少时间要触发一次function的内容，单位为毫秒。
函数setInterval的使用方法非常简单，但是如何巧妙地应用参数功能来制作影格则是动画运行起来的关键。在介绍一个strokeText（）函数。其主要功能用来描述文字的外框，也是可以帮助我们将文字绘制成图形，以便后续使用其他的图形控制方法来装饰文字。
strokeText（text，x，y，maxWidth）
text//要描述的文字内容
x//文字出现在画布中的x坐标
y//文字出现在画布中的y坐标
maxWidth//描述文字的最大宽度（非必要）
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style>
canvas{
border:1px solid black;
}
</style>
<script>
var text=['L','O','V','E'];
var a=0;
var canvas,ctx;
function run(){
canvas=document.getElementById('C1');
ctx=canvas.getContext('2d');
setInterval(drawText,750);
}
function drawText(){
ctx.clearRect(0,0,300,150);
ctx.font='72pt Arial';
ctx.strokeText(text[a],100,100);
if(a<3)a++;else a=0;
}
</script>
</head>
<body onload="run()">
<canvas id="C1" width="450" height="400">浏览器不支持画布功能</canvas>
</body>
</html>
{requestAnimationFrame}
使用函数setInterval处理动画是早期浏览器所支持的做法，在IE10之后的浏览器，支持一种新的动画播放函数requestAnimationFrame，之所以会发展这样的函数，是为了优化动画播放的流畅度以及优化对系统资源的消耗。
在使用函数setInterval，由于系统会遵照我们设置的时间间隔执行程序，因此不会去考虑最佳的播放帧数（大部分显示屏幕为16.7毫秒更新一次画面），且在浏览器窗口缩小时仍然继续执行，过度绘制动画会造成对硬件资源的浪费。
函数requestAnimationFrame是专门为动画而生的API，是自动配合浏览器更新画面的速度句柄，并在浏览器不可见时（例如缩小）就停止动画的播放，从而使用适量的硬件资源。由于这个函数在不同浏览器版本下必须使用不同的函数语句，为了方便调用会通过整合的方式来统一函数，之后只要使用“reqAnimFrame”来统一调用就可以了。
reqAnimFrame=window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame;
reqAnimFrame(renderLoop);
参数renderLoop代表要执行的动画函数，其实使用方法和setInterval（）有点不同，只是因为requestAnimationFrame会自动调整动画播放时间，因此不需要再设置播放的时间间隔。
<html>
<head>
<meta charset="utf-8"/>
<style>
canvas{
border:1px solid black;
}
</style>
<script >
var x=0,y=0;
var xspeed=5,yspeed=5;
function run(){
//reqAnimFrame 返回重复执行run()
reqAnimFrame =
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
reqAnimFrame(run);
if(y==0&&x<400)x+=xspeed;
else if(x==400&&y<350)y+=yspeed;
else if(y==350&&x>0)x-=xspeed;
else if(x==0&&y>0)y-=yspeed;
draw();
}
function draw(){
var canvas=document.getElementById('C1');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,450,400);
ctx.fillRect(x,y,50,50);
}
run();
</script>
</head>
<body>
<canvas id="C1" width="450" height="400">浏览器不支持画布功能</canvas>
</body>
</html>
{setinterval}
动画操作的概念是通过快速连续播放无数个静态影格，从通过人类视觉暂留效应达到画面动起来的感觉。因为需要每隔一段时间就会自动执行一次的函数来帮助我们播放影格，javascript所提供的函数setInterval便能达到这样的效果。
setInterval（function，milliseconds）
参数function用来标示每隔一段时间就要播放的函数，通常函数内会定义静态影格变化的逻辑；参数milliseconds则用来定义每隔多少时间要触发一次function的内容，单位为毫秒。
函数setInterval的使用方法非常简单，但是如何巧妙地应用参数功能来制作影格则是动画运行起来的关键。在介绍一个strokeText（）函数。其主要功能用来描述文字的外框，也是可以帮助我们将文字绘制成图形，以便后续使用其他的图形控制方法来装饰文字。
strokeText（text，x，y，maxWidth）
text//要描述的文字内容
x//文字出现在画布中的x坐标
y//文字出现在画布中的y坐标
maxWidth//描述文字的最大宽度（非必要）
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style>
canvas{
border:1px solid black;
}
</style>
<script>
var text=['L','O','V','E'];
var a=0;
var canvas,ctx;
function run(){
canvas=document.getElementById('C1');
ctx=canvas.getContext('2d');
setInterval(drawText,750);
}
function drawText(){
ctx.clearRect(0,0,300,150);
ctx.font='72pt Arial';
ctx.strokeText(text[a],100,100);
if(a<3)a++;else a=0;
}
</script>
</head>
<body onload="run()">
<canvas id="C1" width="450" height="400">浏览器不支持画布功能</canvas>
</body>
</html>
{requestAnimationFrame}
使用函数setInterval处理动画是早期浏览器所支持的做法，在IE10之后的浏览器，支持一种新的动画播放函数requestAnimationFrame，之所以会发展这样的函数，是为了优化动画播放的流畅度以及优化对系统资源的消耗。
在使用函数setInterval，由于系统会遵照我们设置的时间间隔执行程序，因此不会去考虑最佳的播放帧数（大部分显示屏幕为16.7毫秒更新一次画面），且在浏览器窗口缩小时仍然继续执行，过度绘制动画会造成对硬件资源的浪费。
函数requestAnimationFrame是专门为动画而生的API，是自动配合浏览器更新画面的速度句柄，并在浏览器不可见时（例如缩小）就停止动画的播放，从而使用适量的硬件资源。由于这个函数在不同浏览器版本下必须使用不同的函数语句，为了方便调用会通过整合的方式来统一函数，之后只要使用“reqAnimFrame”来统一调用就可以了。
reqAnimFrame=window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame;
reqAnimFrame(renderLoop);
参数renderLoop代表要执行的动画函数，其实使用方法和setInterval（）有点不同，只是因为requestAnimationFrame会自动调整动画播放时间，因此不需要再设置播放的时间间隔。
<html>
<head>
<meta charset="utf-8"/>
<style>
canvas{
border:1px solid black;
}
</style>
<script >
var x=0,y=0;
var xspeed=5,yspeed=5;
function run(){
//reqAnimFrame 返回重复执行run()
reqAnimFrame =
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
reqAnimFrame(run);
if(y==0&&x<400)x+=xspeed;
else if(x==400&&y<350)y+=yspeed;
else if(y==350&&x>0)x-=xspeed;
else if(x==0&&y>0)y-=yspeed;
draw();
}
function draw(){
var canvas=document.getElementById('C1');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,450,400);
ctx.fillRect(x,y,50,50);
}
run();
</script>
</head>
<body>
<canvas id="C1" width="450" height="400">浏览器不支持画布功能</canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- html5 web数据存储
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证（升级版）
- 2019年开发人员应该学习的8个JavaScript框架
- Powershell 创建炫丽美观的Html报表
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用