有沒有辦法使用jQuery檢測畫布線？

Question

我想弄清楚如何用戶的鼠標在jQuery的HTML 5畫布上擊中一行。

這裏是產生畫布上的線條代碼：

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function(){ 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     ctx.moveTo(40,0); 
     ctx.lineTo(40,360); 
     ctx.stroke(); 
     ctx.moveTo(80,400); 
     ctx.lineTo(80,40); 
     ctx.stroke(); 
     ctx.moveTo(120,0); 
     ctx.lineTo(120,360); 
     ctx.stroke(); 
     ctx.moveTo(160,400); 
     ctx.lineTo(160,40); 
     ctx.stroke(); 
    }; 
</script> 

我使用，我居然在這裏上的另一個問題找到了一個修改jQuery腳本，但現在我無法弄清楚如何檢測這條線，主要是畫布中從白色到黑色的顏色差異。我知道這可以通過圖像來完成，但我還沒有看到任何像這樣的東西。

我想我真正的問題是，有沒有辦法使用jQuery檢測canvas元素的顏色變化？

Answer 1

它可能用javascript做。事實上，你在上面的例子中沒有使用任何jQuery。一個簡單的方法是從畫布上抓取像素數據，然後在指定的x和y位置檢查alpha。如果alpha未設置爲0，那麼您在畫布上繪製了一些東西。下面是我真正快速完成的功能。

Live Demo

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    width = 400; 
height = 400; 

canvas.width = canvas.height = 200; 

// draw 
ctx.moveTo(40, 0); 
ctx.lineTo(40, 360); 
ctx.stroke(); 
ctx.moveTo(80, 400); 
ctx.lineTo(80, 40); 
ctx.stroke(); 
ctx.moveTo(120, 0); 
ctx.lineTo(120, 360); 
ctx.stroke(); 
ctx.moveTo(160, 400); 
ctx.lineTo(160, 40); 
ctx.stroke(); 

function detectLine(x, y) { 
    var imageData = ctx.getImageData(0, 0, width, height), 
     inputData = imageData.data, 
     pData = (~~x + (~~y * width)) * 4; 

    if (inputData[pData + 3]) { 
     return true; 
    } 

    return false; 
} 

canvas.addEventListener("mousemove", function(e){ 
    var x = e.pageX, 
     y = e.pageY; 
    console.log(detectLine(x, y)); 
}); 

console.log(detectLine(40, 100)); 
console.log(detectLine(200, 200));