我正在尝试使用新标签,我已经遇到了我的第一个障碍。我想我会通过实现经典棋盘游戏 Go/Baduk/Weiqi 的一个版本开始弄湿我的脚。
我已经使用 moveTo() 和 lineTo() 绘制了 xy 网格,并且我使用 fillRect() 绘制了一个木质背景,当然它需要在那个 XY 网格“下方”。
然而,这就是我的问题。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);
}