HTML5中Canvas上的事件监听器问题

Question

我是HTML5的新手，想在我的鼠标上创建一个事件监听器。我已经编写了以下代码，但无法理解为什么不能在我的画布元素上创建事件监听器，请帮忙。

     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();
     }

}

- Faizan Tanveer

Answer 1

您希望将事件添加到画布中，而不是2D上下文：

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

这里有一个演示：jsFiddle链接。

- Joe

---

如果你是对的，那么为什么我的事件监听器不起作用呢 :s 事件监听器代码是什么？ - Faizan Tanveer

var started = false; function ev_mousemove (ev) { var x, y;// 获取鼠标相对于画布元素的位置。 if (ev.layerX || ev.layerX == 0) { // 火狐浏览器 x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera 浏览器 x = ev.offsetX; y = ev.offsetY; }// 事件处理程序就像一个跟踪鼠标移动的绘图铅笔。我们开始绘制由线条组成的路径。 if (!started) { - Faizan Tanveer

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

我有困难理解您的意思：希望这个链接能帮到您：http://jsfiddle.net/gCxcT/ - Joe

Answer 2

有一些错误：

• 您不能将侦听器附加到上下文，侦听器只能附加到：文档中的单个节点、文档本身、窗口或XMLHttpRequest。因此，您应该将其附加到canvas元素。

• 你不能嵌套canvas。

• canvasHeight属性未定义

我使用您的示例进行了修改并使其正常工作 --> 这里

- jasalguero

---

好的，你说得对，我的代码想要做的是在画布上鼠标移动时着色，但问题是只有屏幕的一部分是活动的，也就是说只有画布被着色了！ - Faizan Tanveer

你的意思是屏幕只有一部分是活动的吗？ - jasalguero

我的意思是，颜色只在特定区域上完成，而不是整个画布上完成。无论如何，我解决了它，非常感谢你的帮助，我希望我也能给你一个投票。 - Faizan Tanveer