在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問題的畫布上的事件監聽器

回答

相關問題