如何将同一对象的多个图像绘制到单个画布上

Question

我想用相同的图像多次在画布上绘制，换句话说，我想应用代码，当我点击画布区域时会产生一个图像，当我再次点击其他地方时它会产生另一个图像，所以开。

<canvas></canvas>

但是当尝试再次绘制时，它会替换之前绘制的图像，然后绘制新图像。而不是将之前绘制的图像保留在画布上。

function drawAll(){
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height,0, 0, 700, 618);

    if(coordinates.length > 0){
    coordinates.map((coord, key) =>{
    context.beginPath();

    context.moveTo(coord.startX, coord.startY);

    context.lineTo(coord.toX,coord.toY);

    context.strokeStyle="rgb(226, 104, 36)";
    context.lineWidth=2;
    context.stroke();                   
        });
    }

    if(entry){
        context.drawImage(imageObjBall, entry.posX-8, entry.posY-8, 16, 16);
    }
}

编辑：嘿，抱歉忘记在此处插入此位

function handleClick(e){
    if(!isDrawing && prize_id != null){
    var pos = getMousePos(canvas, e);
    mouseX = pos.x;
    mouseY = pos.y;

    $x_id=`#cor_x_${prize_id}`;
    $y_id=`#cor_y_${prize_id}`;

    context.clearRect(0, 0, 700, 618);

    context.drawImage(imageObjBall, mouseX-8, mouseY-8, 16, 16);

    entry={posX:mouseX,posY:mouseY};

    $($x_id).text(mouseX);
    $($y_id).text(mouseY);        
    drawAll();
    }
}

注意：这是在 laravel 5 中，除此之外还有更多代码，但我 觉得这是您能够提供帮助所需的必要剪辑 我，但如果您需要更多，请让我在其中编辑更多代码 发帖

Answer 1

要使用单个图像对象在画布上绘制多个图像，请通过new Image() 创建图像对象并相应地设置src 属性。

或者，您也可以在 HTML 代码中编写 <img src=""> 标记，并通过 document.querySelector 获取对其的引用。

有一件重要的事情需要考虑：在调用drawImage 之前，您必须确保图像已加载，即使没有加载时间（例如，localhost 或 data-url）。

在我的示例中，我通过不立即启动动画解决了这个问题。相反，requestAnimationFrame 循环在图像 onload 事件中启动。

var R = Math.random
var a = document.getElementById("a")
var W = a.width = 400
var H = a.height = 300
var c = a.getContext("2d")

var img = new Image()
img.src = 'https://assets-cdn.github.com/images/icons/emoji/unicode/1f60d.png'


function loop() {
  var rndX = (R()*W)|0
  var rndY = (R()*H)|0
  c.drawImage(img, rndX, rndY)
  requestAnimationFrame(loop)
}

img.onload=function() {
  loop()
}

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

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