canvas元素是否有“变化”事件？

Question

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

Answer 1

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

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

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

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

Answer 2

您可以使用 mouseup 事件。

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

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

上面的 mouseup 文档实际上有一个很好的画布示例

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

Answer 4

对我来说，我在画布上附加了一个单击事件，并且我能够检测该画布上是否绘制了任何内容。

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

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

Answer 5

不存在事件处理程序，所以这就是我所做的：

我的图像操作程序（不是绘画包）使用两个画布；

一个用于操作，另一个用于撤消功能...

<canvas id="C"></canvas>

<canvas id="U"></canvas>

因此，在需要时可以轻松比较它们以进行更改。

要查询它们是否相同：

let Same = C.toDataURL()===U.toDataURL();

或返回相反的状态...找出它们是否已更改：

let Changed = C.toDataURL()!==U.toDataURL();

我希望这有帮助。