画布 - clearRect() 之后的 drawImage()答案

【问题标题】：Canvas - drawImage() after clearRect()画布 - clearRect() 之后的 drawImage()
【发布时间】：2017-01-06 21:02:42
【问题描述】：

我有问题。我正在使用 JavaScript 在 Canvas 中创建简单的游戏。调用clearRect()后图片不显示，有谁知道怎么解决？

var left1 = 0;
var context1 = document.getElementById('canvas1').getContext('2d');
render1();
function render1() {
   var image = new Image();
   image.onload = function () {
       context1.drawImage(image, left1, 0, 200, 200);
   };
   image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
   left1++;
   requestAnimationFrame(render1);
}

var left2 = 0;
var context2 = document.getElementById('canvas2').getContext('2d');
render2();
function render2() {
   context2.clearRect(0, 0, 500, 250);
   var image = new Image();
   image.onload = function () {
       context2.drawImage(image, left2, 0, 200, 200);
   };
   image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
   left2++;
   requestAnimationFrame(render2);
}

canvas {
  display: block;
}

It works, but old images are not deleted:
<canvas id="canvas1" height="250" width="500"></canvas>

It doesn't work, because of clearRect():
<canvas id="canvas2" height="250" width="500"></canvas>

【问题讨论】：

你为什么在每次signle渲染调用中加载你的图像？

标签： javascript canvas drawimage

【解决方案1】：

如果您尝试为图像设置动画，则无需制作两个画布而是使用计时器，我希望这会有所帮助

    var left1 = 0;
    var context1 = document.getElementById('canvas1').getContext('2d');
    var canvas1 = document.getElementById('canvas1');
    window.onload = init;

    function init() {
        setInterval(drawc, 1000 / 60);
    };

    function drawc() {
        if (left1 > canvas1.width) {
            left1 = 0;
        }
        render1();
    }


    function render1() {

        with(context1) {
            clearRect(0, 0, canvas1.width, canvas1.height);
            var image = new Image();
            image.src = 'http://www.pngall.com/wp-content/uploads/2016/06/Earth-Free-Download-PNG.png';
            beginPath();
            drawImage(image, left1, 0, 200, 200);
            closePath();
            fill();
            left1++;
            // requestAnimationFrame(render1);
        }
    };

【讨论】：