Javascript游戏-不能以0.5像素偏移和不良边界渲染来居中放置圆圈

Question

这是一个小游戏的链接demo，该链接是用Canvas和bootstrap设计的Javascript编码。

您可以看到以下面板（请注意，该面板在Firefox和Chrome上是清楚的，即没有模糊的交叉线和圆圈）：

一切似乎都不错，除了我缩放以检查黑白情况是否很好地居中时，这里是缩放：

如您所见，圆圈没有居中，即在水平方向左侧移动，在垂直方向顶部移动。

但是，我在“ width_board + 0.5”和“ height_board + 0.5”像素上绘制了每条交叉线，以便获得清晰的木板。

要执行此操作，我已经完成了有关CSS的操作：

#game-wrapper {
            border: 5px solid black;
            cursor: crosshair;
            margin: 0;
            float: left;
            width: 481px;
            height: 481px;
            /* Rounded corners */
            overflow: hidden;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px 10px 10px 10px;
            }

并进入HTML页面：

<div id="game-wrapper">
<canvas id="game-canvas" width="480" height="480"></canvas>
</div>

，圆圈位于：

var canvas = document.getElementById('game-canvas');
// Size of canvas
var width = canvas.width,
    height = canvas.height;
// Radius of each piece
var radius = 0.9 * width/16;

// Drawing main frame
 for (i = 0; i < 8; i++)
  for (j = 0; j < 8; j++)
   context.strokeRect(i*width/8 + 0.5, j*height/8 + 0.5, width/8, height/8);
 centerX = 3;
 centerY = 3;
 drawPiece(centerX, centerY, 'white', 'black');
 Hit.arrayCurrent[3][3] = 'white';
 centerX = 3;
 centerY = 4;
 drawPiece(centerX, centerY, 'black', 'white');
 Hit.arrayCurrent[3][4] = 'black';
 centerX = 4;
 centerY = 3;
 drawPiece(centerX, centerY, 'black', 'white');
 Hit.arrayCurrent[4][3] = 'black';
 centerX = 4;
 centerY = 4;
 drawPiece(centerX, centerY, 'white', 'black');
 Hit.arrayCurrent[4][4] = 'white';
}

带有drawPiece()：

function drawPiece(ix, iy, colorIn, colorBorder) {
 // Coordinates on canvas : 
 // x horizontal increasing from left to right
 // y vertical increasing from top to bottom
 var k = ix*width/8 + width/16;
 var l = iy*height/8 + height/16;
 // Draw piece
 context.beginPath();
 context.arc(k, l, radius, 0, 2*Math.PI, false);
 context.fillStyle = colorIn;
 context.fill();
 context.lineWidth = 1;
 context.strokeStyle = colorBorder;
 context.stroke();
}

我需要修改些什么以将白色和黑色碎片居中放置？ 如果我不向零件图添加0.5像素，则说明木板和零件模糊。

此外，我还有另一个问题，如可缩放图像上所示的可播放片段的渲染不好：

您会注意到，蓝色块的白色边框的渲染效果很差，我不知道它可能来自正弦波，我使用的功能与经典的白色和黑色块相同：drawPiece()：

function showPlayableHits(HitCurrent, isShowing) {
 for (var i = 0; i < 8; i++)
  for (var j = 0; j < 8; j++) {
   if (HitCurrent.arrayPlayable[i][j] == 'playable') {
    if (isShowing)
     drawPiece(i, j, HitCurrent.playableColor, HitCurrent.playableBorderColor);
    else
     deleteHit(i, j);
   }
  }
}

欢迎大家的帮助，因为我花了很多时间试图找到有关这两个问题的解决方案以及正确的申请方法。

致谢

Answer 1

浏览器不能很好地处理分数像素

您遇到的问题源于使用0.5px。在某些浏览器上，它将向下舍入，其他浏览器将向上舍入，有些会朝一个方向移动。看看这个Stack Overflow post to see an explanation of why fractional pixels work this way.

我对此的解决方案是确保容器中始终有奇数个像素，内部元素始终有偶数个像素。然后该元素应该居中。