html5问题中画布上的事件侦听器答案

【问题标题】：event listener on canvas in html5 issuehtml5问题中画布上的事件侦听器
【发布时间】：2011-09-07 17:05:49
【问题描述】：

我是 html5 的新手，我想在鼠标上创建一个事件监听器，我写了以下代码，但无法理解 y，我无法在我的画布元素上创建事件监听器，请帮助

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

}

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您想将事件添加到画布，而不是 2d 上下文：

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

这是一个演示：jsFiddle link

【讨论】：

如果你比 y 我的监听器不工作：事件监听器代码是
var 开始 = false;函数 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; } // 事件处理程序的工作方式类似于跟踪鼠标 // 移动的绘图铅笔。我们开始绘制一条由线组成的路径。如果（！开始）{
context.beginPath(); context.moveTo(x, y);开始=真； } else { context.strokeStyle = "#df4b26"; context.lineJoin = "圆形"; context.lineWidth = 10; context.lineTo(x, y); context.stroke(); } }
我无法理解你：我希望这会有所帮助：jsfiddle.net/gCxcT

【解决方案2】：

有几个错误：

您不能将侦听器附加到上下文，侦听器只能附加到：文档中的单个节点、文档本身、窗口或 XMLHttpRequest。所以你应该把它附加到画布元素上。
您不能嵌套画布
canvasHeight 属性未定义

我用你的例子创建了一个 jsfiddle 修改和工作 --> here

【讨论】：

好吧，你说得对，我的代码试图做的是我的鼠标在画布上移动的任何地方的颜色，但问题是我的屏幕的某些部分是活动的，即画布是彩色的！
你的意思是只有屏幕的一部分是活动的？
我的意思是，颜色只在特定区域完成，而不是整个画布，我如何解决它非常感谢您的帮助，我希望我也可以给您投票