如何在画布上获取特定 x,y 位置的特定图像？ [已关闭]

Question

我想在画布上的某个 x,y 位置获取图像，并在一定时间内将其更改为随机位置。我有图片 URl。

我尝试使用drawImage函数，但遇到了一些错误。

let ordrawimage = CanvasRenderingContext2D.prototype.drawImage;
CanvasRenderingContext2D.prototype.drawImage = function newDrawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight){
  if (this.canvas.id === 'canvas') {
    if ((image.src == 'https://agma.io/skins/objects/9_lo.png?v=2' || image.src == 'https://agma.io/skins/objects/9.png?v=2')) {
    alert('coins detected');
  }
}

ordrawimage.apply(this,arguments)
}

Answer 1

我建议您查看本教程。基本上，您可以添加这样的图像：

const c = document.getElementById("canvas");
const ctx = c.getContext("2d");

const img = new Image();
img.src = "https://i.ibb.co/nQ7cRPv/image.jpg"; // image url

img.onload = function() {
  ctx.drawImage(img, 10, 10, 200, 100); // 10,10 is the position, 200,100 is the size
  alert("Coins detected"); // the original post was edited
};

<canvas id="canvas" width="250" height="300" style="border:1px solid grey"></canvas>

编辑：我不太清楚如何移动图像，我想你可以擦除画布并重新绘制它或使用 GIF。