jQuery로 캔버스 라인을 탐지하는 방법이 있습니까?

Question

jQuery를 사용하여 HTML 5 캔버스에서 사용자의 마우스가 선을 치는 것을 어떻게 감지 할 수 있는지 알아 내려고합니다. 여기

캔버스 라인을 생성하는 코드입니다 : 내가 실제로 여기에 또 다른 질문에서 발견 된 수정 jQuery를 스크립트를 사용하고

<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를 사용하여 캔버스 요소의 색상 변경을 감지하는 방법은 무엇입니까?

Answer 1

자바 스크립트와 관련 있습니다. 실제로 위의 예에서 jQuery를 사용하지 않습니다. 캔버스에서 픽셀 데이터를 가져 와서 지정한 x 및 y 위치의 알파를 확인하면 쉽게 할 수 있습니다. 알파가 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));