Javascript 如何使用Canvas drawImage（）停止重复图像而不清除所有内容

如何在画布上绘制图像，而不在画布上打印一堆相同的图像。两个平台粘在一起，彼此不分离。出于某种原因，你必须清除整个直肠，然后一切都消失了

有人有什么想法吗

代码：

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS

var cFunc = 0;
var setRand = 1;
function setR() {
    setRand = setTimeout(setR, 10);
    cTAdd = Math.floor(Math.random() * 100 + 1);
}

var block00;
var block01; // ADD SEPERATION BLOCK(BLOCK HOLE)
var block02;
var block03;
var block04; // ADD SEPERATION BLOCK(BLOCK HOLE)
var block05;

function landT() {
    setThis = setTimeout(landT, 10);

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    ///////////////////////////////////////////////
        //
        // X POSITION OF (BLOCK HOLE)

        ///////////////////////////////////////////////////////////////////////////
        //
        // BOTTOM ROW

        block00 = document.createElement("img");
        block01 = document.createElement("img");
        block02 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 40) {
            block00.src = "images/sep2.png";
            context.drawImage(block00, moveBlock1, 315, 400, 28);
        }

        if (cTAdd > 40 && cTAdd < 80) {
            block01.src = "images/sep1.png"; // ADD SEPERATION BLOCK(BLOCK HOLE)
            context.drawImage(block01, moveBlock2, 315, 200, 28);
        }

        if (cTAdd > 80 && cTAdd < 100) {
            block02.src = "images/platform00.png";
            context.drawImage(block03, moveBlock3, 315, 158, 28);
        }


        ///////////////////////////////////////////////////////////////////////////
        //
        // BLOCK02 GET X POS OF ADDED BLOCK 

        if (getX1 == 0) { //////////////////////////////////////////// SET (BLOCK HOLE) X
            var doc2 = block02.getBoundingClientRect();
            gX1 = doc2.left;
            getX1 = 1;
        }


        ///////////////////////////////////////////////////////////////////////////
        //
        // TOP ROW

        block03 = document.createElement("img");
        block04 = document.createElement("img");
        block05 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 40) {
            block03.src = "images/sep2.png";
            context.drawImage(block03, moveBlock1, 165, 400, 28);
        }

        if (cTAdd > 40 && cTAdd < 80) {
            block04.src = "images/sep1.png"; // ADD SEPERATION BLOCK(BLOCK HOLE)
            context.drawImage(block04, moveBlock1, 165, 200, 28);
        }

        if (cTAdd > 80 && cTAdd < 100) {
            block05.src = "images/platform00.png";
            context.drawImage(block05, moveBlock1, 165, 158, 28);
        }

}

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS 

var thisSet = 1;
var cPlayer = 1;
var moveSpeed = 5;
var xPos = 50;
var yPos = 380;
function moveLand() {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    thisSet = setTimeout(moveLand, 30);

    if (xPos >= 350 && moveL == 1) {
        moveBlock1 = moveBlock1 - 15;
    }

    if (gX1 > 0 && moveL == 1 && xPos >= 350) {
        gX1 = gX1 - 15;
    }
    if (getX1 == 1 && gX1 == 0) {
        getX1 = 0;
    }
    if (gX1 < 0) {
        gX1 = 0;    
    }


    console.log("X1: " + gX1); // CONSOLE/LOG gX1 

    if (moveBlock1 <= -1500) {
        moveBlock1 = 1000;
        moveBlock2 = 1300;
        moveBlock3 = 1600;
        context.clearRect(0, 0, 1023, 300); 
    }

}

---

要在画布上制作形状的动画，必须首先复制要绘制形状的画布部分，然后绘制形状。当需要移动形状时，绘制复制的区域以擦除形状，并在新位置重复该过程。请查看上介绍的Canvas.getImageData和putImageData

我用这个方法在画布上画了一个形状，然后跟着鼠标；它确实有效

下面是一些示例代码来说明

var context = myCanvas.getContext("2d");

// Copy the current area of the canvas
var target_area = context.getImageData(10, 10, 50, 50);

// draw a rectangle there
context.fillRect(15, 15, 40, 40);

// Draw the copied portion back to "erase" just the rectangle
context.putImageData(target_area, 10, 10);

// Copy another area
target_area = context.getImageData(10, 15, 50, 50);

// Draw the rectangle there
context.fillRect(15, 20, 40, 40);

// draw back the copied image to "erase" just the rectangle
context.putImageData(target_area, 10, 15);

// and so on and so on

---

这就是我在w3schools.com的Tryit编辑器中所做的。 这将在画布上移动图像而不重复

<!DOCTYPE html>
<html>
<body onLoad = "getII()">

<canvas id="myCanvas" width="1200" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var inum = 10;



var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(2000, 2000);
var target_area = ctx.getImageData(10, 10, 2000, 2000);

var i;
for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i+0] = 255;
    imgData.data[i+1] = 0;
    imgData.data[i+2] = 0;
    imgData.data[i+3] = 255;
}


function getII() {
var setThis = setTimeout(getII, 100);
inum = inum + 10;

ctx.putImageData(target_area, 10, 10);
ctx.fillRect(inum, 10, 100, 100);
target_area = context.getImageData(10, 10, 2000, 2000);
ctx.putImageData(target_area, 10, 10);
ctx.fillRect(inum, 10, 100, 100);
}


</script>

</body>
</html>

---

画布没有内存，所以是的，当你清除它时，一切都会消失

但是画布非常快。因此，如果您没有复杂图像的过滤操作，这将意味着使用缓慢的getImageData/putImageData，请使您的脚本能够在每一帧重新绘制它：

var ctx=canvas.getContext'2d'； 函数图{ 牵引地； 牌手.平局； 请求动画框架绘制； } var牵引接地=功能{ ctx.clearRect0,0，canvas.width，canvas.height； ctx.fillStyle=CCC； ctx.fillRect0,0，canvas.width，canvas.height； ctx.fillStyle=000； ctx.fillRect0，canvas.height-50，canvas.width，50； ctx.beginPath； ctx.fillStyle=橙色； ctx.arc25,25,12,0,2*Math.PI，0； ctx.fill } var玩家=新玩家； 函数播放器{ var=这个； this.img=新图像； 即.img.onload=draw； that.init=函数{ that.img.src=http://lorempixel.com/50/50?121'; 即.x=canvas.width/2； 即.y=canvas.height/2； 宽度=22； 高度=22； } that.update=函数{ x+=Math.random*3-1.5； y+=Math.random*3-1.5； ifthat.x-that.width/2=canvas.widththat.x=canvas.width-that.width/2； 如果that.y-that.height/2=canvas.height-50that.y=canvas.height-50-that.height/2； } 那.画=函数{ console.logthat.x 那就是更新； ctx.drawmagethat.img，that.x，that.y，that.width，that.height； } 归还； }

---

请再描述一下你想要实现的目标。通过阅读代码，您似乎希望为画布上移动的形状设置动画。画布是平面；要绘制一个形状，然后将其移除以在其他地方绘制，首先需要在画布上复制该空间中已有的内容。这是可以做到的。换句话说，基本的过程是1复制你想要放置形状的矩形2绘制形状3绘制复制的矩形以擦除形状4重复我有你跳上的这些平台，当我绘制图像时，它将绘制图像，但不会擦除它绘制到画布上的旧图像。它只是一次又一次地复制，而没有清除旧图像。试图让它看起来平台在移动，但它看起来像是在涂鸦，因为它在移动的过程中绘制了很多图像而没有擦除它们。我如何才能清除一个形状，就像瞄准它一样？你不能。画布是平的。一旦你画出某样东西，它就不再独立存在；以前在太空中的一切知识都消失了。因此，正如我在回答中所描述的，需要使用getImageData捕获以前存在的内容，然后使用putImageData将其放回。您将如何使用images而不是context.fillRect？完全相同的方法，只是使用相关的图像绘制方法而不是fillRect@SNLippold哇，别那么做！在每个帧或屏幕外画布上重复绘图操作，但不要在每个帧调用getImageData/putImageData！请但是我在一个地方有y的位置，x是唯一移动的。它是从右向左移动的平台。想法是一样的，背景可以是前景，只需在后面调用它。或者，如果您更容易实现，您甚至可以创建层：每个层都是不同的画布，在主循环结束时，您可以按从后到前的顺序在主可见画布上绘制每个层；你有引用的参考文献吗？