Canvas的动画制作（十四）

最新推荐文章于 2024-04-25 18:10:08 发布

airX嵌入式（微信公众号同名）

最新推荐文章于 2024-04-25 18:10:08 发布

阅读量2.5k

点赞数 3

分类专栏： HTML5之Canvas高速入门 HTML5之Canvas高速入门文章标签： HTML5 Canvas 动画制作 setTimeout

本文链接：https://blog.csdn.net/qq_22520215/article/details/90738107

版权

HTML5之Canvas高速入门同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

HTML5之Canvas高速入门

14 篇文章 0 订阅

订阅专栏

动画的产生就是图片快速的连接，所以canvas的动画其实就是不断的刷新一张张图片，而这个刷新有3个过程：更新、清除、绘制。

就上面一句话的事情，我们来慢慢解析：

不断的刷新一张张图片：既然需要不断的刷新页面，那么就需要一个循环执行的函数。这个函数创建很简单。

function MainLoop()
{
    //在这里更新数据、清除画布、绘制新画布
    setTimeout(MainLoop,33);
};

MainLoop();

函数功能就是33ms的循环调用自己，33ms是因为1s产生动画效果的帧数是25-30,因此一帧大约1000/30=33ms

当然，为了可以控制开始停止，需要加按钮方便控制，很简单，定义一个控制的变量playMainLoop，而这个变量是可以通过开启/停止按钮来改变的;以上函数改为：

A、html需添加2个按钮代码如下

<body>
    <div ><button id="startMainLoop" style="background-color: red">Start</button></div>
    <div><button id="stopMainLoop" style="background-color: sandybrown">Stop</button></div>
    <canvas id="myCanvas" >
    <!-- no no no no -->
    </canvas>
</body>

B、按钮按下改变playMainLoop变量代码如下

    var playMainLoop = true；

    var buttonStart = $("#startMainLoop");
    var buttonStop = $("#stopMainLoop");

    buttonStart.hide();

    buttonStart.click(function(){
      $(this).hide();
      buttonStop.show();
      playMainloop = true;
      MainLoop();
    });

    buttonStop.click(function(){
      $(this).hide();
      buttonStart.show();
      playMainloop = false;
});

C、playMainLoop变量控制循环函数，代码如下

function MainLoop()
{
    // 在这里更新数据、清除画布、绘制新画布

    if(playMainLoop)
    {
        setTimeout(MainLoop,33);
    };
};

MainLoop();

D、更新、清除、绘制：

这里以一个正方形移动动画为例：

更新、清除、绘制：横坐标x不断改变，需定义一个变量x，每次循环加1。代码如下

var x = 0；
function MainLoop()
{
    //在这里更新数据、清除画布、绘制新画布
    x++;  //更新数据
    context.clearRect(0,0,canvas.width(),canvas.height()); //清除画布
    context.fillRect(x,250,50,50);  //绘制新画布
    if(playMainLoop)
    { 
        setTimeout(MainLoop,33);
    };
};

这样就可以实现了

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html5</title>

  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript" >$(document).ready(function(){
    var  canvas = $("#myCanvas");
    var  context = canvas.get(0).getContext("2d");

    canvas.attr("width",$(window).get(0).innerWidth);
    canvas.attr("height",$(window).get(0).innerHeight);

    context.fillStyle = "saddlebrown";
    context.fillRect(0,0,canvas.width(),canvas.height());

    var playMainloop = true;

    var buttonStart = $("#startMainLoop");
    var buttonStop = $("#stopMainLoop");

    var x = 0;
    buttonStart.hide();
    buttonStart.click(function(){
      $(this).hide();
      buttonStop.show();
      playMainloop = true;
      MainLoop();
    });

    buttonStop.click(function(){
      $(this).hide();
      buttonStart.show();
      playMainloop = false;
    });

    function MainLoop()
    {
      x++;
      context.clearRect(0,0,canvas.width(),canvas.height());
      
      context.fillRect(x,250,50,50);
      if(playMainloop)
      {
        setTimeout(MainLoop,33);
      };
    };
    MainLoop();

  })</script>
</head>
<body>
<div ><button id="startMainLoop" style="background-color: red">Start</button></div>
<div><button id="stopMainLoop" style="background-color: sandybrown">Stop</button></div>
  <canvas id="myCanvas" >

  <!-- no no no no -->
 </canvas>

</body>
</html>

效果图：

airX嵌入式（微信公众号同名）

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Canvas的动画制作（十四）

动画的产生就是图片快速的连接，所以canvas的动画其实就是不断的刷新一张张图片，而这个刷新有3个过程：更新、清除、绘制。就上面一句话的事情，我们来慢慢解析：不断的刷新一张张图片：既然需要不断的刷新页面，那么就需要一个循环执行的函数。这个函数创建很简单。function MainLoop(){ //在这里更新数据、清除画布、绘制新画布 setTimeout(M...
复制链接

扫一扫