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

Canvas没有记忆，所以是的，当你清除它时，一切都会消失。

但帆布非常快。因此，如果您没有复杂的图片过滤操作（这意味着使用慢getImageData() / putImageData ），请将您的脚本设为一种方法，它将能够在每一帧重绘它：

＆＃13;

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

＆＃13;

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

＆＃13;

现在，如果你真的在后台做了一些复杂的操作，并且你只是想在某些时候绘制一些东西，你可以创建一个画布的克隆，使用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

要在“画布”上执行形状动画，您必须先复制画布中要绘制形状的部分，然后绘制形状。当移动形状时，绘制您复制的区域（以擦除形状）并在新位置重复该过程。看看this w3cschools page上描述的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

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

3 个答案: