Question

我有问题。我正在使用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>

Answer 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);
        }
    };

画布 - clearRect（）之后的drawImage（）

1 个答案: