javascript游戏-无法使用0.5px移位和错误边界渲染来居中圆

这是这个链接 demo 一个用javascript编写的带有画布和引导设计的小游戏。

您可以看到下面的电路板(注意,Firefox和Chrome上的电路板是清晰的,即没有模糊的交叉线和圆圈):

一切看起来都很好,除了当我放大以检查黑白片是否在每个箱子中居中时,这里有一个缩放:

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

但是,我在“宽度板+0.5”和“高度板+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像素到碎片绘图,我有模糊的板和碎片。

此外,我还有另一个问题,关于可播放片段的糟糕呈现,如在这张缩放图像上所示:

你可以注意到蓝色部分的白色边框有一个糟糕的渲染,我不知道它从何而来,因为我正在使用相同的函数 拉深件() 而不是经典的黑白片:

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

任何帮助都是受欢迎的,因为我花了很多时间试图找到关于这两个问题的解决方案和正确的转移申请。

当做