使用网格 JavaScript 中的坐标绘制 2d 对象

Question

我有两个函数，第一个函数绘制一个带内衬的空网格（28x16），第二个函数绘制一个方形框，用颜色填充选定的网格位置，每个框为 25X25。第二个功能允许我使用网格位置在画布中的任何位置绘制一个框。因此，为了绘制一个框，我创建了另一个调用网格位置并将其绘制在那里的函数，例如在必须输入 x=5 和 y=4 的网格位置绘制一个框drawWalls(5,4); 这条线可以反复使用来绘制不同的盒子，所以我可以绘制盒子，功能完美，现在我想同时创建1个以上的方形盒子（例如一行盒子），问题是的，我从未创建过这样的循环或具有超过 1 个变量的循环，请帮忙，我也对数组有点困惑，我想知道这些框是否存储在数组中，我该如何调用再说一遍，例如我单击一个框并删除它，这并不重要，但是如果您对第一个问题有任何想法，请帮助，谢谢您的时间。

绘制网格

function drawGrid() {
    ctxBg.beginPath();
    for (var i = 0; i <= canvasWidth-25; i+= 25) {
        ctxBg.moveTo(-25 + i,55);
        ctxBg.lineTo(-25 + i, canvasHeight - 55);
    }
    for (var i = 25; i <= canvasHeight -75; i+= 25) {
        ctxBg.moveTo(55,25 + i);
        ctxBg.lineTo(canvasWidth-55, 25 + i);
    }
    ctxBg.stroke();
}

function ClearBg() {
    ctxBg.clearRect(0,0,canvasWidth,canvasHeight);
}    

画墙

function Wall(row, col) {
  this.row = row;
  this.col = col;
  this.color = "#000";

  this.width = 25
  this.height = 25
  this.leftX = this.row;
  this.rightX = this.row + this.width;
  this.topY = this.col;
  this.bottomY = this.col + this.height;
}
function drawWalls(x,y) {
  walls.push( new Wall(x, y));

  for (var b = 0; b < walls.length; b++) {
    ctxWall.fillStyle = walls[b].color;
    ctxWall.fillRect(walls[b].row * gridSize, walls[b].col * gridSize, walls[b].width, walls[b].height);
  }
}

function createWalls() {
  drawWalls(9,9);
  drawWalls(8,8); 
  drawWalls(7,7);
}

我试图在循环中创建函数 createWalls 以将它们全部绘制在一起，不幸的是我还没有创建鼠标单击事件，但我很快就会

Answer 1

这是一件有趣的事情：http : //jsfiddle.net/techsin/rcjouqkf/

要获得任何“框/单元格”坐标，您所需要做的就是：

1. 获取点击的 x 位置除以一个框的大小，所以你知道
2. 你在哪个盒子里把它四舍五入到下一个整数，哪个

3. 代表您所在的盒子。然后将该数字与框大小相乘。这为您提供了框的右边缘重复，以便 y 获得底部边缘。

   要获得顶部和左侧，只需从边缘减去大小。

   var can = getById('can'),
       boxes = 20,
       size = 20,
       ctx = can.getContext('2d'),
       clearBtn = getById('clearBtn');
   
   drawGrid();
   
   function drawGrid() {
       var len = can.height = can.width = boxes * size;
       for (var i = 0; i < boxes; i++) {
           ctx.beginPath();
           ctx.moveTo(size + size * i - .5, 0);
           ctx.lineTo(size + size * i - .5, len);
           ctx.moveTo(0, size + size * i - .5);
           ctx.lineTo(len, size + size * i - .5);
           ctx.stroke();
       }
   }
   
   
   can.addEventListener('mousemove', function (evt) {
       var mousePos = getMousePos(can, evt);
       var sx = (Math.ceil(mousePos.x/size)-1)*size,
           sy =  (Math.ceil(mousePos.y/size)-1)*size;
       console.log(sx,sy,sx+size,sy+size);
       ctx.fillRect(sx,sy,size,size);
   }, false);
   
   clearBtn.addEventListener('click', function (evt) {
       ctx.clearRect(0,0,can.width,can.height);
       drawGrid();
   });
   
   
   function getMousePos(canvas, evt) {
       var rect = can.getBoundingClientRect();
       return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
       };
   }
   
   function getById(x) {
       return document.getElementById(x);
   }