（19）HTML5-Canvas动画应用

最新推荐文章于 2023-01-02 18:52:41 发布

梧桐下的四叶草

最新推荐文章于 2023-01-02 18:52:41 发布

阅读量388

点赞数

分类专栏： HTML5 文章标签： html5 javascript html 动画

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52421700

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

学完了基础的几何图形绘制与变形，接下来要感受一下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 οnlοad="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>

梧桐下的四叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（19）HTML5-Canvas动画应用

学完了基础的几何图形绘制与变形，接下来要感受一下canvas处理动画的威力，毕竟游戏美工最重要的就是要让画面动起来，才不会让玩家觉得枯燥乏味。HTML5的画布提供了强大的动画应用函数，应用这些函数播放一连串的静态影格，就可以让画面“动起来”了。{setinterval}动画操作的概念是通过快速连续播放无数个静态影格，从通过人类视觉暂留效应达到画面动起来的感觉。因为需要每隔一段时间就会自动执
复制链接

扫一扫