私は新しいタグを少し試していて、すでに最初の障害にぶつかっています。古典的なボード ゲームの Go/Baduk/Weiqi のバージョンを実装することで、足を濡らし始めると考えました。
moveTo() と lineTo() を使用して xy グリッドを描画し、もちろんその XY グリッドの「下」にある必要がある fillRect() を使用して木の背景を描画しました。
しかし、そこに私の問題があります。fillRect() の背景はグリッドの上に描画されるため、グリッドが見えなくなります。
これを元に戻すにはどうすればよいですか? これが私が取り組んでいるものです：
var boardSize = 19;
var gridSpacing = 25;
var gridSize = boardSize * gridSpacing;
var xStart = (window.innerWidth / 2) - (gridSize / 2) + 0.5;
var yStart = (window.innerHeight / 2) - (gridSize / 2) + 0.5;
var xEnd = xStart + gridSize;
var yEnd = yStart + gridSize;
var gridContext = canvas.getContext("2d");
gridContext.beginPath();
// Draw the board x lines
for (var x = xStart; x <= xEnd; x += gridSpacing)
{
gridContext.moveTo(x, yStart);
gridContext.lineTo(x, yEnd);
}
// Draw the board y lines
for (var y = yStart; y <= yEnd; y += gridSpacing)
{
gridContext.moveTo(xStart, y);
gridContext.lineTo(xEnd, y);
}
gridContext.strokeStyle = "#000000";
gridContext.stroke();
// Create new image object to use as pattern
var img = new Image();
img.src = 'bg_wood.jpg';
img.onload = function()
{
var boardBG = gridContext.createPattern(img, 'repeat');
gridContext.fillStyle = boardBG;
gridContext.fillRect(xStart, yStart, gridSize, gridSize);
}