通過點擊事件在畫布上標識對象

Question

在這個簡單的代碼中，我使用了一個看起來根本不起作用的eventListener。畫布顯示圖像，並假定給定的函數確定是否發生點擊。我不明白爲什麼eventListener的行爲如此。任何見解都會有所幫助。

mycanv.addEventListener("click", function(e) { 
    var output = document.getElementByID("output"); 
    ctx.fillStyle = 'blue'; 
    //ctx.clearRect(0,0,100,20); 

    if (hitpaint) { 
     //ctx.fillText("hit",100,20);                                                   
     output.innerHTML = "hit"; 
    } else { 
     //ctx.fillText("miss",100,20);                                                   
     output.innerHTML = "miss"; 
    } 
}, false); 

的hitpaint()函數被定義爲：

function hitpaint(mouse_event) { 
    var bounding_box = mycanv.getBoundingClientRect(); 
    var mousex = (mouse_event.clientX - bounding_box.left) * 
     (mycanv.width/bounding_box.width); 
    var mousey = (mouse_event.clientY - bounding_box.top) * 
     (mycanv.height/bounding_box.height); 
    var pixels = ctx.getImageData(mousex, mousey, 1, 1); 

    for (var i = 3; i < pixels.data.length; i += 4) { 
     // If we find a non-zero alpha we can just stop and return                                            
     // "true" - the click was on a part of the canvas that's                                            
     // got colour on it.                                                     
     if (pixels.data[i] !== 0) return true; 
    } 

    // The function will only get here if none of the pixels matched in                                         
    return false; 
} 

最後，這顯示在隨機位置的圖片到畫布中主循環：

function start() { 
    // main game function, called on page load                                                
    setInterval(function() { 
     ctx.clearRect(cat_x, cat_y, 100, 100); 
     cat_x = Math.random() * mycanv.width - 20; 
     cat_y = Math.random() * mycanv.height - 20; 
     draw_katy(cat_x, cat_y); 
    }, 1000); 
} 

Answer 1

這裏有一個一些問題：

• 作爲Grundy在評論中指出，hitpaint從未被稱爲;現在它檢查它是否存在，並且總是返回true
• 鼠標座標風險以小數值結尾，getImageData不適用
• 縮放鼠標座標通常不是必需的。帆布最好應該有一個固定的大小而無需額外的CSS大小
• 添加邊界檢查X/Y，以確保他們在裏面帆布位

我建議這個改寫：

mycanv.addEventListener("click", function(e) { 
    var output = document.getElementByID("output"); 
    ctx.fillStyle = 'blue'; 
    //ctx.clearRect(0,0,100,20); 

    if (hitpaint(e)) { // here, call hitpaint() 
     //ctx.fillText("hit",100,20);                                                   
     output.innerHTML = "hit"; 
    } else { 
     //ctx.fillText("miss",100,20);                                                   
     output.innerHTML = "miss"; 
    } 
}, false); 

然後在hitpaint：

function hitpaint(mouse_event) { 

    var bounding_box = mycanv.getBoundingClientRect(); 

    var x = ((mouse_event.clientX - bounding_box.left) * 
    (mycanv.width/bounding_box.width))|0; // |0 cuts off any fraction 
    var y = ((mouse_event.clientY - bounding_box.top) * 
    (mycanv.height/bounding_box.height))|0; 

    if (x >= 0 && x < mycanv.width && y >= 0 && y < mycanv.height) { 
     // as we only have one pixel, we can address alpha channel directly 
     return ctx.getImageData(x, y, 1, 1).data[3] !== 0; 
    } 
    else return false; // x/y out of range 
}