canvas上多次画图片，会不会造成资源浪费？

Question

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

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

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

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

部分代码

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()函数是频率非常高么？为什么不会造成视觉上的影响？

Answer 1

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

Answer 2

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

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