canvas上多次画图片,会不会造成资源浪费?

缓缓
  • 1.3k

这是一个英雄抓怪物的小游戏

  • 网上有各种说明以及源代码

  • 自己模拟了一下,并进行部分优化

  • 将英雄的移动范围设置在背景区域之内

部分代码

var render = function () {
        if (bgReady) {
            ctx.drawImage(bgImage, 0, 0);
        }
        if (heroReady) {
            ctx.drawImage(heroImage, hero.x, hero.y);
        }
        if (monsterReady) {
            ctx.drawImage(monsterImage, monster.x, monster.y);
        }
        //计分
        ctx.fillStyle = "rgb(250,250,250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
    };

var main = function () {
        var now = Date.now();
        var delta = now - then;

        update(delta / 1000);

        render();
        then = now;

        var w = window;
        requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
        // 立即调用主函数
        requestAnimationFrame(main);
    };
  • 这段代码被执行很多次相当于render()函数被调用多次

  • render()函数主要在canvas画布上画图片

问题

  1. render()函数将被调用多次,多次执行ctx.drawImage(),相当于canvas上有几百张图片为什么不会造成资源浪费?

  2. 每次根据移动位置不同,重新添加图片,requestAnimationFrame()函数是频率非常高么?为什么不会造成视觉上的影响?

回复
阅读 4.5k
2 个回答

canvas上不会有几百张图片,可以把canvas看作一个只是存放像素数据的数组,想象你就是在操作画图板,你把图片复制到画图板上几百次。(很不严谨的说法)
事实上你的浏览器页面一直都在刷新,requestAnimationFrame就是在下次浏览器页面刷新的时候触发回调。
写游戏都是这样的,每一帧都要运行一个update、render之类的函数

  1. 不会造成资源浪费。因为你在反复画同一个画布,这里的资源一直都是这个画布大小的像素所在内存大小。每次drawImage就像拿粉笔在一块固定大小的黑板上画画一样,每次画都只是将前面画的内容或者部分内容给覆盖了(像素的替换)。所以你画再多次,只要是同一块黑板,那么所用的资源就是一样的(这里粉笔不算资源...)。如果你每次render的时候,都是新创建canvas,然后在上面绘制,那就浪费好多黑板(资源)了

  2. requestAnimationFrame的频率是浏览器控制的,不忙就高频(60次每秒),忙了就低频。60次每秒是在做网页动画追求的,如果你的代码足够好,浏览器可以在1/60秒执行完main的内容,那么在没有其他行为的影响下,就能有60帧的绘制,否则就低于60帧,就是看上去不流畅(掉帧)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏