HTML 5 画布:如何检查所有线点坐标

HTML 5 Canvas: how to check all line points coordinates?

本文关键字：坐标 检查 画布 何检查 HTML      更新时间：2023-09-26

我想用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;
                    }
                }
            }
        }

请注意，我有两个画布，一个供用户绘制，另一个用于黑框（这将是你的形状）。当用户移动鼠标时，我在用户画布上画一个点，并在另一个画布上检查鼠标是否在黑匣子上。

代码：

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>

相关文章：