приемник событий на холсте в выпуске html5 - PullRequest
3 голосов
/ 07 сентября 2011

Я новичок в html5, я хочу создать прослушиватель событий на моей мыши, я написал следующий код, но не могу понять y, я не могу создать прослушиватель событий на своем элементе canvas, любезно помогите

     var canvasDiv = document.getElementById('canvas');
     canvas_simple = document.createElement('canvas');
     canvas_simple.setAttribute('height', canvasHeight);
     canvas_simple.setAttribute('id', 'canvasSimple');
     canvasDiv.appendChild(canvas_simple);
     if(typeof G_vmlCanvasManager != 'undefined')
     {
     canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
     }
     context_simple = canvas_simple.getContext("2d");
    context_simple.addEventListener('mousemove', ev_mousemove, false);

в свете ответа, я хочу также дать мне код слушателя события, может быть, он также содержит ошибку

  var started = false;
  function ev_mousemove (ev) {
  var x, y;

   if (ev.layerX || ev.layerX == 0) { // Firefox
  x = ev.layerX;
  y = ev.layerY;
  } 
  else if (ev.offsetX || ev.offsetX == 0) { // Opera
  x = ev.offsetX;
  y = ev.offsetY;
  }
  if (!started) {

  context.beginPath();
  context.moveTo(x, y);
  started = true;
  }
  else {
    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 10;
    context.lineTo(x, y);
    context.stroke();
     }

}

Ответы [ 2 ]

4 голосов
/ 07 сентября 2011

Вы хотите добавить событие на свой холст, а не 2-й контекст:

canvas_simple.addEventListener('mousemove', ev_mousemove, false);

Вот демоверсия: jsFiddle link

1 голос
/ 07 сентября 2011

Есть несколько ошибок:

  • Вы не можете прикрепить слушателя к контексту, слушатели могут быть присоединены только к: одному узлу в документе, самому документу, окнуили XMLHttpRequest.Поэтому вы должны прикрепить его к элементу canvas.

  • Нельзя вложить canvas

  • Свойство canvasHeight не определено

Я создал jsfiddle с измененным и работающим вашим примером -> здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...