www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

canvas中绘制图像动画效果

2020-02-26 22:20 来源:未知

要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果。这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然后快速的播放它们,在人的眼睛看来就是一个完整的动画效果。

requestAnimationFrame:通知浏览器你需要执行一个动画,并请求浏览器调用指定的函数来在下一次重绘前更新动画。

制作canvas动画的基本步骤

接下来的例子是一个模拟时钟动画的例子。

functionanimate(){reqAnimFrame=window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame;reqAnimFrame;}

控制canvas动画

为了获得更好的动画性能,我们通常使用requestAnimationFrame()方法。当浏览器装备好绘制下一帧动画时,我们可以将绘制函数作为参数传入这个方法中。

1、清空canvas:除了背景图像之外,你需要清空之前绘制的所有图形。

第二种方法是使用事件监听。例如你需要做一个小游戏,你可以监听键盘和鼠标的事件,然后在捕获相应的事件时使用setTimeout()方法来制作动画效果。

我们需要一种方法来在指定时间内执行我们的绘制图形函数。有两种方式可以控制动画的执行。

canvas中绘制图像动画效果。返回HTML5 Canvas教程目录

模拟时钟动画的实现代码如下:

上面效果的实现代码如下:

3、绘制动画图形:这一步中你需要绘制那些动画的图形元素。

canvas动画示例

varx=0;vary=15;varspeed=5;functionanimate(){reqAnimFrame=window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame;reqAnimFrame;x =speed;if{speed=-speed;}draw{varcanvas=document.getElementById;varcontext=canvas.getContext;context.clearRect;context.fillStyle="#ff00ff";context.fillRect;

最后,animate()函数会调用draw()方法。draw()方法在上面的代码中没有写出来,它实际上做的事情就是前面提到的绘制一个动画帧的4个步骤:清空canvas,保存状态,绘制图形,恢复状态。

animate()函数首先会获取requestAnimationFrame()函数的一个引用。注意在不同的浏览器中会使用不同的名称。变量reqAnimFrame会在不同的浏览器中设置为不同的值,总之它不能为空。

还有一件需要注意的事情是animate()函数必须被调用一次来启动动画,否则requestAnimationFrame()函数将永远不会被调用,动画也不会被正常执行。

上面canvas动画的实现代码如下:

你的浏览器不支持HTML5 Canvas!

然后reqAnimFrame()方法被调用,并将animate()函数作为参数传入。当浏览器准备好绘制下一帧动画时,animate()函数就会被调用。

你的浏览器不支持HTML5 Canvas!

通过在浏览器准备画下一帧的时候,给浏览器发出信号,可以使浏览器对你的动画进行硬件加速,这比使用setTimeout()来绘制动画效果会好得多。

setTimeout:在delay毫秒内执行function指定的函数。

下面是一个小例子:一个小矩形在canvas中来回不停的运动。

下面是你在canvas上绘制一个动画帧的基本步骤:

第一种是使用下面的三个window对象上的方法:window.setInterval()window.setTimeout()window.requestAnimationFrame()。它们都能在指定时间内调用指定的函数。

你的浏览器不支持HTML5 Canvas!

setInterval:在每delay毫秒时间内反复执行function指定的函数。

下面是一个地球绕太阳以及月亮绕地球旋转的canvas动画效果。

4、恢复canvas状态:如果你之前保存过canvas的状态,在这一步中将它们恢复。

varsun=newImage;varearth=newImage{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;}functiondrawSolarSystem(){varctx=document.getElementById.getContext;ctx.globalCompositeOperation='destination-over';ctx.clearRect;//clearcanvasctx.fillStyle='rgba';ctx.strokeStyle='rgba';ctx.save();ctx.translate;//Earthvartime=newDate();ctx.rotate*time.getSeconds*time.getMilliseconds;ctx.translate;ctx.fillRect;//Shadowctx.drawImage;//Moonctx.save();ctx.rotate*time.getSeconds*time.getMilliseconds;ctx.translate;ctx.drawImage;ctx.restore;ctx.beginPath();ctx.arc(150,150,105,0,Math.PI*2,false);//Earthorbitctx.stroke();ctx.drawImage;reqAnimFrame=window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame;reqAnimFrame;}init();
functionclock;varctx=document.getElementById.getContext;ctx.save();ctx.clearRect;ctx.translate;ctx.scale;ctx.rotate;ctx.strokeStyle="black";ctx.fillStyle="white";ctx.lineWidth=8;ctx.lineCap="round";//Hourmarksctx.save();for{ctx.beginPath();ctx.rotate;ctx.moveTo;ctx.lineTo;}ctx.restore();//Minutemarksctx.save();ctx.lineWidth=5;for{if{ctx.beginPath;ctx.lineTo;}ctx.rotate;}ctx.restore();varsec=now.getSeconds();varmin=now.getMinutes();varhr=now.getHours();hr=hr>=12?hr-12:hr;ctx.fillStyle="black";//writeHoursctx.save();ctx.rotate *min ctx.lineWidth=14;ctx.beginPath;ctx.lineTo;ctx.restore();//writeMinutesctx.save();ctx.rotate*min ctx.lineWidth=10;ctx.beginPath;ctx.lineTo;ctx.restore();//Writesecondsctx.save();ctx.rotate;ctx.strokeStyle="#D40000";ctx.fillStyle="#D40000";ctx.lineWidth=6;ctx.beginPath;ctx.lineTo;ctx.beginPath();ctx.arc(0,0,10,0,Math.PI*2,true);ctx.fill;ctx.arc(95,0,10,0,Math.PI*2,true);ctx.stroke();ctx.fillStyle="rgba";ctx.arc(0,0,3,0,Math.PI*2,true);ctx.fill;ctx.beginPath();ctx.lineWidth=14;ctx.strokeStyle='#325FA2';ctx.arc(0,0,142,0,Math.PI*2,true);ctx.stroke;reqAnimFrame=window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame;reqAnimFrame;}reqAnimFrame=window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame;reqAnimFrame;

2、保存canvas的状态:如果在这一步中你使用了不同的绘图状态,并且你想在绘制每一帧时使用相同的原始状态,你需要保存这些原始状态。

版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:canvas中绘制图像动画效果