JavaScript动画基础canvas绘制简单动画Word文件下载.docx
- 文档编号:5804353
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:28
- 大小:1.85MB
JavaScript动画基础canvas绘制简单动画Word文件下载.docx
《JavaScript动画基础canvas绘制简单动画Word文件下载.docx》由会员分享,可在线阅读,更多相关《JavaScript动画基础canvas绘制简单动画Word文件下载.docx(28页珍藏版)》请在冰点文库上搜索。
DOCTYPEhtml>
html>
head>
title>
setTimeout方法的应用<
/title>
/head>
body>
canvasid="
myCanvas"
width="
400"
height="
style="
border:
3pxdouble#996633;
"
>
/canvas>
scripttype="
text/javascript"
varcanvas=document.getElementById('
myCanvas'
);
varctx=canvas.getContext('
2d'
functiondraw(x,y,len,color)
{
ctx.fillStyle=color;
ctx.fillRect(x,y,len,len);
}
setTimeout("
draw(10,10,100,'
red'
)"
1000);
draw(110,110,200,'
blue'
5000);
/script>
/body>
/html>
在浏览器中打开保存这段HTML代码的html文件,则等待1秒后,会绘制一个边长为100的红色正方形,再等待5秒,绘制一个边长为200的蓝色正方形。
通过这个例子可以知道:
(1)setTimeout()方法可以用于延时;
(2)setTimeout()方法只执行code一次。
如果要多次调用,则需要让code自身再次调用setTimeout()。
为产生动画效果,显然得让setTimeout()方法多次执行。
修改上面的HTML代码如下。
vari=0;
functionmove()
ctx.fillStyle='
;
ctx.fillRect(i,i,50,50);
i++;
if(i==350)
i=0;
ctx.clearRect(0,0,400,400);
move()"
10);
move();
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到一个简单的箭头伸出动画,如图1所示。
图1简单的动画
(2)setInterval()方法。
setInterval()也是HTMLDOMWindow对象的一个方法,它可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval(code,millisec);
其中,参数code表示要调用的函数或要执行的代码串,millisec表示周期性执行或调用code之间的时间间隔(以毫秒计)。
setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。
由setInterval()返回的ID值可用作clearInterval()方法的参数。
clearInterval()方法可取消由setInterval()设置的timeout。
其调用形式为:
clearInterval(id_of_setinterval);
其中参数id_of_setinterval必须是由setInterval()返回的ID值。
若用setInterval()方法实现图1所示的动画,则编写的HTML文件如下。
setInterval()方法的应用<
setInterval("
(3)requestAnimationFrame()方法。
requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。
编写动画循环的关键是要知道延迟时间多长合适。
一方面,循环间隔必须足够短,这样才能保证不同的动画效果显得更平滑流畅;
另一方面,循环间隔还要足够长,这样才能保证浏览器有能力渲染产生的变化。
大多数显示器的刷新频率是60Hz,相当于每秒钟重绘60次。
大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过了这个频率,用户体验也不会有提升。
因此,最平滑动画的最佳循环间隔是1000ms/60,约等于17ms。
以这个循环间隔重绘的动画是平滑的,因为这个速度最接近浏览器的最高限速。
为了适应17ms的循环间隔,多重动画可能需要加以节制,以便不会完成得太快。
虽然setTimeout()方法和setInterval()方法均可完成定时循环操作,但setTimeout()和setInterval()都不十分精确。
为它们传入的第二个参数millisec,实际上只是指定了把动画代码添加到浏览器UI线程队列以等待执行的时间。
如果队列前面已经加入了其他任务,那动画代码就要等前面的任务执行完成后再执行。
如果UI线程繁忙,比如忙于处理用户操作,那么即使把代码加入队列也不会立即执行。
确定什么时候绘制下一帧是保证动画平滑的关键。
然而,面对不十分精确的setTimeout()和setInterval(),开发人员至今都没有办法确保浏览器按时绘制下一帧。
因此,采用setTimeout()和setInterval(),即使优化了循环间隔,可能仍然只能接近想要的效果。
引入requestAnimationFrame()方法的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。
代码中使用requestAnimationFrame()方法,就是告诉浏览器希望执行一个动画,让浏览器在下一个动画帧安排一次网页重绘。
requestAnimationFrame的优势在于充分利用显示器的刷新机制,比较节省系统资源。
显示器有固定的刷新频率(60Hz或75Hz),也就是说,每秒最多只能重绘60次或75次,requestAnimationFrame的基本思想就是与这个刷新频率保持同步,利用这个刷新频率进行页面重绘。
不过有一点需要注意,requestAnimationFrame是在主线程上完成。
这意味着,如果主线程非常繁忙,requestAnimationFrame的动画效果会大打折扣。
requestAnimationFrame使用一个回调函数作为参数。
这个回调函数会在浏览器重绘之前调用。
requestID=window.requestAnimationFrame(callback);
目前,主流浏览器(Firefox23/IE10/Chrome/Safari)都支持这个方法。
可以用下面的方法,检查浏览器是否支持requestAnimationFrame。
如果不支持,则自行模拟部署该方法。
window.requestAnimFrame=(function(){
returnwindow.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback){
window.setTimeout(callback,1000/60);
};
})();
上面的代码按照1秒钟60次(大约每16.7毫秒一次),来模拟requestAnimationFrame。
与setTimeout()和setInterval()方法不同,requestAnimationFrame()不需要调用者指定帧速率,浏览器会自行决定最佳的帧效率。
也就是说浏览器页面每次要重绘,就会通知requestAnimationFrame。
如果浏览器绘制间隔是16.7ms,它就按这个间隔绘制;
如果浏览器绘制间隔是10ms,它就按10ms绘制。
这样就不会存在过度绘制的问题,动画不会丢帧。
另外,使用requestAnimationFrame()方法,一旦页面不处于浏览器的当前标签,就会自动停止刷新。
例如,页面最小化了,页面是不会进行重绘的,requestAnimationFrame自然也不会触发(因为没有通知)。
页面绘制全部停止,资源高效利用,节省了CPU、GPU和电力。
和setTimeout类似,requestAnimationFrame的回调函数只能被调用一次,并不能被重复调用(这点和setInterval不同)。
因此,使用requestAnimationFrame的时候,同样需要反复调用它。
由于setTimeout可以自定义调用时间,requestAnimationFrame的调用时间则是跟着系统的刷新频率走的,所以在实现动画的时候,setTimeout比requestAnimationFrame更加灵活,requestAnimationFrame比setTimeout表现效果更加优秀。
若用requestAnimationFrame()方法实现图1所示的动画,则编写的HTML文件如下。
requestAnimationFrame方法的应用<
requestAnimationFrame(move);
2.绘制简单图形实现动画
图1的动画就是从左上角坐标位置(0,0)开始,绘制一个边长为50的红色正方形,之后每隔10毫秒后将左上角坐标位置的水平和垂直坐标均增加1,再绘制一个正方形,从而得到一个简单的箭头伸出动画效果。
通过在画布中绘制简单图形,达到时间间隔后,擦除(有时候也可暂时不擦除)前次绘制的图形,重新绘制一个位置或大小略有变化的图形,这样就可得到动画效果。
例1向中心交汇的箭头。
仿照图1动画思想略作变化,编写如下的HTML代码。
向中心交汇的箭头<
functiondraw(id)
varcanvas=document.getElementById(id);
ctx=canvas.getContext('
setInterval(painting,10);
functionpainting()
ctx.fillStyle="
green"
ctx.fillRect(i,i,10,10);
ctx.fillRect(400-i,400-i,10,10);
ctx.fillRect(i,400-i,10,10);
ctx.fillRect(400-i,i,10,10);
if(i==200)
bodyonload="
draw('
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到如图2所示的动画。
图2向中心交汇的箭头
例2逐层向里绘制的圆。
层层向内画的圆<
varcontext=canvas.getContext('
varflag=1;
varr=180;
functionanimate(){
window.requestAnimationFrame(animate);
draw();
functiondraw(){
vardig=Math.PI/120;
varx=Math.sin(i*dig)*r+200;
vary=Math.cos(i*dig)*r+200;
context.fillStyle=flag?
'
rgb(10,255,255)'
:
rgb(255,100,0)'
context.beginPath();
context.arc(x,y,3,0,Math.PI*2,true);
context.closePath();
context.fill();
if(i>
240){
r=r-20;
flag=!
flag;
if(r<
=0){
context.clearRect(0,0,canvas.width,canvas.height);
r=180;
}
animate();
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到如图3所示的动画。
图3层层向内画的圆
3.通过图形变换实现动画效果
在Canvas中,可以绘制一个基本图形,然后通过对这个基本图形使用平移、缩放和旋转等图形变换的方法实现动画效果。
例3放大缩小的五角星。
放大缩小的五角星<
varx=200;
vary=200;
varradius=30;
varrot=0;
vardr=5;
functiondraw()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(x,y);
ctx.rotate(rot/180*Math.PI);
ctx.scale(radius,radius);
ctx.beginPath();
for(vari=0;
i<
5;
i++)//绘制标准五角星
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
ctx.closePath();
ctx.fillStyle="
red"
ctx.fill();
ctx.restore();
radius+=dr;
if(radius>
200||radius<
30)
dr=-dr;
draw()"
60);
在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到如图4所示的动画。
这个动画效果的变化核心是语句“ctx.scale(radius,radius);
”在起作用。
图4放大缩小的五角星
若将上面程序段中,radius固定取值120,再修改变化语句
为
rot=(rot+2)%360;
则五角星会进行旋转,呈现出如图5所示的动画效果。
图5旋转的五角星
4.遮罩动画
利用CanvasAPI提供的裁切方法clip(),可以用来实现遮罩动画。
例4图片圆形展开后收缩。
圆形展开后收缩<
varr=10;
varcanvas=document.getElementById('
varctx=canvas.getContext('
varimage=newImage();
image.src='
aaa.jpg'
image.onload=function(){
ctx.drawImage(image,0,0);
100);
ctx.clearRect(0,0,400,400);
ctx.save();
ctx.arc(200,200,r,0,Math.PI*2,true);
white"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 动画 基础 canvas 绘制 简单
![提示](https://static.bingdoc.com/images/bang_tan.gif)