在HTML5问题的画布上的事件监听器

我是新的HTML5，我想创建一个事件监听器在我的鼠标，我写了下面的代码，但不能理解Y，我不能创建事件监听器在我的画布元素，好心帮在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(); 
    }

}

来源

2011-09-07 Faizan Tanveer

你想将事件添加到您的画布，而不是2 d背景：

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

这里是一个演示：jsFiddle link

来源

2011-09-07 17:08:31 Joe

我即使监听器不工作：s事件监听器代码为 –

var started = false;函数ev_mousemove（ev）{var x，y; //获取鼠标相对于画布元素的位置。 if（ev.layerX || ev.layerX == 0）{// Firefox x = ev.layerX; y = ev.layerY; } \t else if（ev.offsetX || ev.offsetX == 0）{// Opera x = ev.offsetX; y = ev.offsetY; } //事件处理程序的工作方式类似于跟踪鼠标移动的绘图笔。我们开始绘制一条由线组成的路径。 if（！started）{ –

context.beginPath（）; context.moveTo（x，y）; started = true; } \t else { \t \t context.strokeStyle =“＃df4b26”; \t \t context.lineJoin =“round”; context.lineWidth = 10; context.lineTo（x，y）; context.stroke（）; } } –

有几个错误：

不能听者重视的背景下，听众只能附加于：文档中的单个节点，文档本身，窗口或XMLHttpRequest。所以你应该把它附加到画布元素上。
您可以
的canvasHeight属性未定义

我创建你的榜样修改和工作一的jsfiddle不能嵌套的画布 - 如果乌拉圭回合仪式大于y>here

来源

2011-09-07 17:32:13 jasalguero

好吧，你说得对，我的代码试图做的是颜色，我的鼠标在画布上移动，但问题是我的屏幕只有一部分是活动的，即画布是彩色的！ –

你是什么意思只是屏幕的一部分是活动的？ – jasalguero

我的意思是，颜色只在特定区域完成，而不是整个画布，任何我如何解决它非常感谢您的帮助，我希望我也可以给你一个投票 –

在HTML5问题的画布上的事件监听器

回答

相关问题