画布元素是否有“更改”事件？答案

【问题标题】：Does canvas element have "change" event?画布元素是否有“更改”事件？
【发布时间】：2025-12-09 18:05:01
【问题描述】：

有没有办法将事件处理程序附加到canvas 元素的更改？每当有东西在上面绘制任何东西时，我都需要触发一个函数。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

如果您真的想这样做，请劫持事件中内置的 context 上的所有调用，然后调用原始函数（您之前已复制）。

我的建议：
不做以上，会很慢，很难维护。相反，您可以更改应用程序的设计，例如，您可以创建自定义绘图函数，这些函数将抽象画布并将事件内容放入其中。

在进行大量绘图时，这还会带来更少的context.* 调用（因此代码更简洁）的额外好处。

【讨论】：

【解决方案2】：

您可以使用mouseup 事件。

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

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

上面的 mouseup 文档实际上有 a good canvas example

【讨论】：

【解决方案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' );

【讨论】：

【解决方案4】：

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

在这里提琴 - http://jsfiddle.net/ashwyn/egXhT/2/

检查文字//Event if Drawn，你就会明白在哪里。

【讨论】：