Question

我的画布中有多个图像。我有一个大图像，在这里我有其他图像。我接受了fiddle example。

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

var img1 =   loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);

var imagesLoaded = 0;
function main() {
  imagesLoaded += 1;

  if(imagesLoaded == 2) {
      // composite now
      ctx.drawImage(img1, 0, 0);

      ctx.globalAlpha = 0.5;
      ctx.drawImage(img2, 0, 0);
  }
}

function loadImage(src, onload) {
  // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being- called
  var img = new Image();

  img.onload = onload;
  img.src = src;

  return img;
}

画布HTML5对我来说是全新的。那么如何在画布上的每个图像上设置一个点击事件呢？

Answer 1

当您将图像绘制到画布时，它不会作为图像添加到图像中，而是作为一组颜色值添加到图像中。以后无法检查哪个操作导致哪些像素采用哪种颜色。事件处理仅限于画布范围。

您可以做的是构建自己的点击事件处理代码。

将图像绘制到画布时，请保存坐标，宽度和高度。然后为canvas.onclick添加一个侦听器，并使用处理函数将鼠标坐标与您保存的坐标进行比较。

多个图像上的Canvas HTML5点击事件

1 个答案: