<canvas> Go / Baduk / Weiqi Game Board - PullRequest
Новая
       21

<canvas> Go / Baduk / Weiqi Game Board

4 голосов
/ 20 февраля 2010

Я немного экспериментирую с новым тегом, и я уже достиг своего первого дорожного удара. Я подумал, что начну промокать ногами, внедрив версию классической настольной игры Go / Baduk / Weiqi.

Я нарисовал сетку xy, используя moveTo () и lineTo (), и нарисовал деревянный фон, используя 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);
        }

1 Ответ

2 голосов
/ 20 февраля 2010

Попробуйте использовать gridContext.globalCompositeOperation = 'destination-over'; при рисовании фона.

...