HTML：替换图像指定位置的矩形

Question

我在我的 HTML 页面上显示了一张图片。 单击图像中的指定区域时：

Xmin

我想仅将该区域替换为另一张小图片。

正确的做法是什么？

我应该将画布放在图像上并在单击画布时将图像加载到其中吗？

目标是更改附件中显示的开关状态。

谢谢你， 兹维卡

Answer 1

您正在寻找https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

const EG = document.getElementById("EG");

const ctx = EG.getContext("2d")

EG.addEventListener("click", ({offsetX, offsetY}) => {
  ctx.fillRect(offsetX, offsetY, 4, 4);
  // use ctx.drawImage instead
})

canvas {
border: 1px solid red;
}

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