如何在不清除所有內容的情況下使用Canvas drawImage（）停止圖像重復

Question

您如何將圖像繪制到畫布上而不在畫布上打印出一堆塗滿了相同圖像的圖像。 平台粘在一起而不彼此分開。 由於某種原因，您必須清除整個RECT，然后一切都消失了？？？

有人有什么想法嗎？

碼：

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

}

Answer 1

這就是我在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>

Answer 2

畫布沒有記憶，所以是的，當您清除它時，所有東西都將消失。

但是畫布非常快。 因此，如果您沒有復雜的圖像過濾器操作（這意味着將使用慢速的getImageData() / putImageData ），請以某種方式制作腳本，使其能夠在每一幀重繪它：

 var ctx = canvas.getContext('2d'); function draw(){ drawBackground(); player.draw(); requestAnimationFrame(draw); } var drawBackground= function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.fillStyle="#CCC"; ctx.fillRect(0,0,canvas.width, canvas.height); ctx.fillStyle="#000"; ctx.fillRect(0,canvas.height-50,canvas.width, 50); ctx.beginPath(); ctx.fillStyle="orange"; ctx.arc(25,25,12,0,2*Math.PI,0); ctx.fill() } var player = new Player(); function Player(){ var that = this; that.img = new Image; that.img.onload=draw; (that.init = function(){ that.img.src='http://lorempixel.com/50/50?121'; that.x=canvas.width/2; that.y=canvas.height/2; that.width = 22; that.height = 22; })() that.update = function(){ that.x += Math.random()*3-1.5; that.y += Math.random()*3-1.5; if(that.x-(that.width/2)<=0)that.x=that.width/2; if(that.x+(that.width/2)>=canvas.width)that.x=canvas.width-that.width/2; if(that.y-(that.height/2)<=0)that.y=that.height/2; if(that.y+(that.height/2)>=canvas.height-50)that.y=canvas.height-50-that.height/2; } that.draw = function(){ console.log(that.x) that.update(); ctx.drawImage(that.img, that.x, that.y, that.width, that.height); } return that; }

 <canvas id="canvas"></canvas>

現在，如果您確實在后台執行了一些復雜的操作，並且只想在某個點上畫一些正在其上移動的東西，則可以創建畫布的克隆，使用drawImage()方法在畫布上創建副本。復制，然后在每一幀上重繪您保存的畫布和移動對象：

// save the original
var cloned = canvas.cloneNode(true).getContext('2d');
cloned.drawImage(canvas, 0,0);

// Then after in the draw loop
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(cloned.canvas, 0,0);
drawYourMovingObject();

Answer 3

要做到在畫布形狀的動畫，你必須先復制要繪制形狀畫布的部分，然后繪制形狀。 當談到時間，移動形狀，畫出你復制的區域（抹去的形狀），並在新的位置重復上述過程。 看看上描述Canvas.getImageData（）和putImageData（）這個w3cschools頁

我用這個方法做的形狀在畫布跟隨鼠標; 它肯定有效。

下面是一些示例代碼來說明。

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

如何在不清除所有內容的情況下使用Canvas drawImage（）停止圖像重復

問題描述

3 個解決方案

解決方案1
0 2015-11-06 22:33:16

解決方案2
0 已采納 2015-11-07 00:58:40

解決方案3
-1 2015-11-06 19:56:07

如何在不清除所有內容的情況下使用Canvas drawImage（）停止圖像重復

問題描述

3 個解決方案

解決方案1 0 2015-11-06 22:33:16

解決方案2 0 已采納 2015-11-07 00:58:40

解決方案3 -1 2015-11-06 19:56:07

解決方案1
0 2015-11-06 22:33:16

解決方案2
0 已采納 2015-11-07 00:58:40

解決方案3
-1 2015-11-06 19:56:07