Javascript canvas元素是否有“0”；更改“；事件

是否有方法将事件处理程序附加到

画布

元素的更改？每当有东西在其上绘制任何内容时，我都需要启动函数。

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

如果确实要这样做，请劫持事件中内置的

上下文

上的所有调用，然后调用原始函数（之前已复制）

我的建议：
不要这样做，这将是缓慢和难以维持。相反，您可以更改应用程序的设计，例如，您可以创建自定义绘图函数，这些函数将抽象画布并将事件内容放在画布中

---

这还可以减少

上下文。*

调用（因此更干净的代码）的额外好处，在进行大量绘图时。

我将实际包装跟踪这些命令所需的画布iff。以下是一个简单的跟踪示例，仅适用于几种方法：

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' );

---

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

在这里拉小提琴-

检查文本

//如果绘制了事件

，您将了解事件的位置。

您可以使用事件

上面的mouseup文档实际上有

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

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