Canvas元素有“change”事件吗？

Question

有没有一种方法可以将事件处理程序附加到canvas元素的更改事件上？每当绘制任何内容时，我都需要触发一个函数。

- Michal Till

Answer 1

不，canvas元素不提供任何事件，它只是一个普通的位图。

如果你真的想要做到这一点，在你的事件中劫持所有的context调用，然后调用之前拷贝过的原始函数。

我的建议：
不要这样做，它会变得很慢且难以维护。相反，改变你应用的设计，你可以创建自定义的绘图函数，将画布抽象化，并将事件功能放在那里。

这也有一个额外的好处，即在做大量的绘图时少了一些context.*的调用（因此代码更加简洁）。

- Ivo Wetzel

Answer 2

你可以使用 mouseup 事件。

canvasElement.addEventListener('mouseup', e => {
  // Fire function!
});

// or jQuery    
$('canvas').on('mouseup', function() {
  // Fire function!
});

上面的mouseup文档实际上有一个不错的画布示例。

- Subtletree

Answer 3

如果需要跟踪这些命令，我会实际上包装画布。以下是一个简单的示例，仅跟踪几个方法：

function eventOnDraw( ctx, eventName ){
  var fireEvent = function(){
    var evt = document.createEvent("Events");
    evt.initEvent(eventName, true, true);
    ctx.canvas.dispatchEvent( evt );
  }
  var stroke = ctx.stroke;
  ctx.stroke = function(){
    stroke.call(this);
    fireEvent();
  };
  var fillRect = ctx.fillRect;
  ctx.fillRect = function(x,y,w,h){
    fillRect.call(this,x,y,w,h);
    fireEvent();
  };
  var fill = ctx.fill;
  ctx.fill = function(){
    fill.call(this);
    fireEvent();
  };
}

...

var myContext = someCanvasElement.getContext('2d');
someCanvasElement.addEventListener( 'blargle', myHandler, false );
eventOnDraw( myContext, 'blargle' );

- Phrogz

---

可能曾经在我使用Firefox时有效，但现在已经无法使用了。事件处理程序从未触发。 - undefined

Answer 4

对于我来说，我在画布上附加了一个点击事件，并且能够检测到是否在画布上绘制了任何东西。

这里是示例 - http://jsfiddle.net/ashwyn/egXhT/2/

查找文本//Event if Drawn，您将理解其位置。

- Ashwin