<canvas>前往/ Baduk /围棋游戏局

我正在试验一下新标签，我已经打到了第一个roadbump。我想通过实施一个经典的棋盘游戏Go/Baduk/Weiqi的版本，我会开始让自己的脚湿润。<canvas>前往/ Baduk /围棋游戏局

我已经使用moveTo（）和lineTo（）绘制了xy网格，并且我使用fillRect（）绘制了一个木制背景，当然需要“下”这个XY网格。

但是，其中存在我的问题。 fillRect（）背景绘制在网格的顶部 - 从而遮蔽了网格。

我该如何反转？这里就是我的工作：绘制背景时使用gridContext.globalCompositeOperation = 'destination-over';

 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); 
     }

来源

2010-02-20 matthewhudson

您似乎是先画线，然后是背景 - 尝试其他方式 – 2010-02-20 06:54:05

请给出您选择的答案为正确的答案（如果您认为它值得一个，就像您在这种情况下明显做的那样）。 – bignose 2010-02-20 07:45:20

尝试。

来源

2010-02-20 06:44:48 kennytm

工作绝对漂亮！我早些时候搞了一次globalCompositeOperation，但看起来我只尝试过“源代码”变体。谢谢！注意别的我的代码可疑吗？我不得不承认，我不完全理解画布绘图堆栈 - 或者save（）和restore（）是如何使用的。或者我是否应该使用closePath（）。返回文档！ – matthewhudson 2010-02-20 07:04:20

我似乎遇到了一个新的问题，但同样的道理。我试图在板子本身上绘制棋子（当然！），但我遇到了同样的“分层”/合成问题。我添加了下列块： var stone = new Image（）; stone.src =“b.png”; grid.onload = function（） { \t gridContext.drawImage（stone，xStart - 30，yStart - 30）; }; 什么给？ – matthewhudson 2010-02-21 06:40:39

@MrMatt当绘制件时，将'globalCompositeOperation'改回''source-over'。 – kennytm 2010-02-21 06:45:11

<canvas>前往/ Baduk /围棋游戏局

回答

相关问题