HTML 5画布：如何检查所有线条点坐标？

Question

我想用一个canavas构建一个简单的游戏：有一个形状，用户必须绘制它的边界，而不会离开它。我有形状，用户可以绘制，但现在我无法找到一种方法来检查用户绘制何时离开形状边界。我应该检查他绘制的每一个点的坐标。是否有可能以及如何还有其他方式？谢谢！

function findxy(res, e) { 
      if (res == 'down') { 
       if(status == 'wait'){ 
        status = 'run'; 
        startX = e.clientX -canvas2.offsetLeft; 
        startY = e.clientY -canvas2.offsetLeft; 
       } 
       if (status == 'run'){ 
        write = true; 
        currX = e.clientX -canvas2.offsetLeft; 
        currY = e.clientY -canvas2.offsetTop; 

        context2.fillStyle = 'red'; 
        context2.fillRect(currX, currY, lineWidth, lineWidth); 
       } 
      } 
      if (res == 'up' || res == "out") { 
       if(status=='run'){ 
        status = 'stop'; 
        write = false; 
        if(won) 
         alert('You won!'); 
        else 
         alert('You lose!'); 
       } 
      } 
      if (res == 'move') { 
       if (write) { 
        currX = e.clientX - canvas2.offsetLeft; 
        currY = e.clientY - canvas2.offsetTop; 

        var baseData = context1.getImageData(currX, currY, 1, 1).data; 
        context2.fillStyle = 'red'; 
        context2.fillRect(currX, currY, lineWidth, lineWidth); 
        if(baseData[3]!=255){ 
         alert('You lose!'); 
         status='lose'; 
         write=false; 
        } 
        if(currX==startX && currY==startY){ 
         won=true; 
        } 

       } 
      } 
     } 

Answer 1

请注意，我有两个画布，一个供用户绘制，另一个用于黑盒（即您的形状）。当用户移动鼠标时，我在用户画布上画一个点，如果鼠标在黑色框上，我检查另一个画布。

代码：

var CheckCanvases = function() { 
 
    var canvas1 = document.getElementById("canvas1"); 
 
    var canvas2 = document.getElementById("canvas2"); 
 
    var ctx1 = canvas1.getContext("2d"); 
 
    var ctx2 = canvas2.getContext("2d"); 
 
    var output = document.getElementById("output"); 
 

 
    this.init = function() { 
 
    var self = this; 
 
    ctx1.fillRect(0, 0, 80, 80); 
 

 
    canvas2.addEventListener("mousemove", function(e) { 
 
     var mousePosX = e.clientX; 
 
     var mousePosY = e.clientY; 
 

 
     self.checkIfMouseIsInBox(mousePosX, mousePosY); 
 
    }) 
 
    } 
 

 
    this.checkIfMouseIsInBox = function(x, y) { 
 
    var imageData = ctx1.getImageData(x, y, 1, 1).data; 
 
    ctx2.fillRect(x, y, 1, 1); 
 
    //image data is an Red, Green, Blue, Alpha array -> [0, 0, 0, 0] 
 
    //if it is [0, 0, 0, 255] it means it is not transparent, thus the mouse is in the black box 
 
    if (imageData[3] == 255) { 
 
     output.innerHTML = "In Box"; 
 
    } else { 
 
     output.innerHTML = "Not in Box" 
 
    } 
 
    } 
 

 
    this.init(); 
 
} 
 

 
var checkCanvases = new CheckCanvases();

canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
h3 { 
 
    margin-top: 120px; 
 
}

<canvas id="canvas1" width="200" height="100"></canvas> 
 
<canvas id="canvas2" width="200" height="100"></canvas> 
 
<h3 id="output">Not in Box</h3>