<canvas> 围棋游戏棋盘

Question

我正在尝试使用新的``标签进行实验，但我已经遇到了第一个难题。我想着先通过实现经典的围棋游戏来熟悉一下。

我使用`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);
        }

- matthewhudson

---

你似乎是先画线，再画背景 - 尝试反过来做。 - Eli Bendersky

请给您选择的正确答案投一票（如果您认为它值得），就像在这种情况下明显做的那样。 - bignose

Answer 1

尝试在绘制背景时使用 gridContext.globalCompositeOperation = 'destination-over';。

- kennytm

---

完美地工作了！我之前在尝试globalCompositeOperation时出了点问题，但看起来我只尝试了“source-”变化。谢谢！你是否注意到我的代码还有其他问题？我必须承认我并不完全理解画布绘制堆栈 - 或者save()和restore()应该如何使用，或者是否应该使用closePath()。回到文档！ - matthewhudson

我似乎遇到了一个新问题，但是与之前的问题类似。我正在尝试在棋盘上方绘制棋子（当然！），但是我遇到了相同的“分层”/合成问题。我添加了以下代码： var stone = new Image(); stone.src = “b.png”; stone.onload = function() { gridContext.drawImage(stone, xStart - 30, yStart - 30); };是什么原因呢？ - matthewhudson

@MrMatt 绘制图案时，请将 globalCompositeOperation 更改回 source-over。 - kennytm

工作正常...但现在网格线消失了。 - matthewhudson

@MrMatt：请参见http://pastie.org/835165。问题在于`onload`不会在定义时立即执行。因此，在执行`onload`时，所有之前的复合操作都不会生效。你只能在`onload`期间更改它。 - kennytm