У элемента canvas есть событие "change"?

Question

Есть ли способ присоединить обработчик событий к изменению элемента canvas? Мне нужно запускать функцию всякий раз, когда что-то рисует на ней.

Answer 1

Нет, элемент canvas не предоставляет никаких событий, это просто обычное растровое изображение.

Если вы действительно хотите это сделать, перехватите все вызовы на context, встроенном в ваши события, а затем вызовите оригинальную функцию (которую вы скопировали ранее).

Мой совет:
Не делайте выше, это будет медленно и трудно поддерживать. Вместо этого измените дизайн вашего приложения, вы можете, например, создать пользовательские функции рисования, которые будут абстрагировать холст и помещать туда материал событий.

Это также будет иметь дополнительное преимущество: меньше вызовов context.* (следовательно, более чистый код) при выполнении большого количества рисования.

Answer 2

Вы можете использовать событие mouseup .

Я использовал jquery для этого

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

Answer 3

Для меня я прикрепил событие щелчка на холсте, и я могу определить, нарисована ли какая-либо вещь на этом холсте.

Скрипка здесь - http://jsfiddle.net/ashwyn/egXhT/2/

Проверьте текст //Event if Drawn и вы поймете, где.

Answer 4

Я бы фактически обернул холст, если это необходимо для отслеживания этих команд. Вот простой пример отслеживания только для нескольких методов:

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