我正在使用画布创建一个棋盘游戏，我成功做到了，但我无法与每个案例交互，例如分配新颜色，我该怎么做

Question

大家好，感谢大家的关心，

一切都在问题标题中。

var canvas = document.getElementById("canvas");
var randomColor =function(){return  Math.floor(Math.random()*16777215).toString(16);}
var ctx = canvas.getContext("2d");
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;

var tuiles = {}





var hexa = function(x,y,s){


tuiles[x+' '+y] = canvas.getContext("2d")

  tuiles[x+' '+y] .beginPath();
    tuiles[x+' '+y] .moveTo(x,y);


tuiles[x+' '+y] .lineTo(x+(s/2),y-(s/5))

tuiles[x+' '+y] .lineTo(x+s,y)

tuiles[x+' '+y] .lineTo(x+s,y+(s/2))
 
tuiles[x+' '+y] .lineTo(x+(s/2),y+(s/2)+(s/5))

tuiles[x+' '+y] .lineTo(x,y+(s/2))
 
tuiles[x+' '+y] .lineTo(x,y)
 

     tuiles[x+' '+y] .stroke();
     tuiles[x+' '+y]  .closePath();
 
tuiles[x+' '+y] .fillStyle ="#"+randomColor()
tuiles[x+' '+y] .fill();
 
}
 

var col =function(x,y,s,c,l){
if(c > 0)
{
hexa(x,y,s)

col(x+s,y,s,c-1)

}

}


var row =function(x,y,s,c,l){

col(x,y,s,c,l)


if(l > 1){

    if(l % 2 == 0){
hexa(x,y,s)

row(x+(s/2),y+(s/2)+(s/5),s,c,l-1)
}
else{

hexa(x,y,s)

row(x-(s/2),y+(s/5)+(s/2),s,c,l-1)


}
}
else{

console.dir(tuiles)

}


}


var grid = function(x,y,s,c,l){

row(x,y,s,c,l)

}



grid(100,100,ctx.canvas.height/15,15,15)

我想将每个六角盒存储在 tuiles 对象中，这样我就可以设法独立地更改每个盒子的颜色。

但我发现做到这一点的唯一方法是为我绘制的每个六边形创建一个新的画布元素，这是荒谬的。

感谢您的帮助

我把我的代码放在下面

Answer 1

有几种方法。但无论哪种方式，您都应该有某种函数来将鼠标位置转换为数据，反之亦然。 对于六边形，您可以使用函数来检查点是否在多边形内部。总结一下：

1. 记忆中形状的表示
2. 将鼠标位置转换为记忆形状的功能

var canvas = document.getElementById("canvas");
var randomColor = function() {
  return Math.floor(Math.random() * 16777215).toString(16);
}
var ctx = canvas.getContext("2d");
const {
  width,
  height
} = canvas.getBoundingClientRect();
ctx.canvas.width = width
ctx.canvas.height = height

var hexagons = []

function drawPolygon(polygon, color) {

  ctx.beginPath();
  ctx.moveTo(polygon[0].x, polygon[0].y);
  for (var i = 1; i < polygon.length; i++) {
    ctx.lineTo(polygon[i].x, polygon[i].y)
  }
  ctx.stroke();
  ctx.closePath();
  ctx.fillStyle = "#" + color
  ctx.fill();
}

var hexa = function(x, y, s) {

  var polygon = [

    {
      x: x,
      y: y
    },
    {
      x: x + (s / 2),
      y: y - (s / 5)
    },
    {
      x: x + s,
      y: y
    },
    {
      x: x + s,
      y: y + (s / 2)
    },
    {
      x: x + (s / 2),
      y: y + (s / 2) + (s / 5)
    },
    {
      x: x,
      y: y + (s / 2)
    },
    {
      x: x,
      y: y
    },


  ]

  hexagons.push(polygon)
  drawPolygon(polygon, randomColor())
}


var col = function(x, y, s, c, l) {
  if (c > 0) {
    hexa(x, y, s)
    col(x + s, y, s, c - 1)
  }
}


var row = function(x, y, s, c, l) {
  col(x, y, s, c, l)
  if (l > 1) {

    if (l % 2 == 0) {
      hexa(x, y, s)
      row(x + (s / 2), y + (s / 2) + (s / 5), s, c, l - 1)
    } else {
      hexa(x, y, s)
      row(x - (s / 2), y + (s / 5) + (s / 2), s, c, l - 1)
    }
  } else {
    // console.dir(tuiles)

  }

}


var grid = function(x, y, s, c, l) {
  row(x, y, s, c, l)
}


canvas.addEventListener('mousemove', function(ev) {
  var cx = ev.offsetX
  var cy = ev.offsetY
  // console.log(cx, cy)

  // find which hexagon contains mouse position
  var hexa = hexagons.find((hexa) => isPointInPoly(hexa, {
    x: cx,
    y: cy
  }))
  if (hexa) {
    drawPolygon(hexa, randomColor())
    canvas.style.cursor = "pointer"
  } else {
    canvas.style.cursor = ""
  }

})

grid(20, 20, ctx.canvas.height / 4, 4, 4)


function isPointInPoly(poly, pt) {
  // from http://snippets.dzone.com/posts/show/5295
  for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
    ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) &&
    (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) &&
    (c = !c);
  return c;
}

canvas {
  border: 1px solid red;
}

<canvas id="canvas" width="320" height="200"></canvas>