Javascript 画布中游戏中圆形边界的渲染不正确

我做了一个小游戏。在这里，您可以看到黑白圆圈的缩放，它们代表两名玩家的点。蓝色圆圈是可能的热门游戏：

我的问题是蓝色圆圈的边框渲染得不好：白色边框绘制得不好，我不明白为什么白色和黑色圆圈的边框很薄，显示得很好

以下是我在JavaScript中使用的代码：

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

我不知道这种糟糕的渲染是从哪里来的。也许这是一个0.5像素移动的东西，就像我们经常看到的关于画布的绘画，但我不确定这一点

更新1:我意识到还有另一个问题：图像上的所有圆圈似乎都向左边的方框（1像素或0.5像素？）轻微移动，其中有：也许这将值得再发一篇文章

更新2:让我们进入详细信息：主板包含在主div中：

 <div id="main-wrapper">
              <div id="othello-wrapper">
                 <canvas id="othello-canvas" width="480" height="480"></canvas>
              </div>
              <div id="score-zone-wrapper">
                 <table id="score-zone">
                    <tr>
                       <td id="score-zone-white" colspan="2" style="padding: 3px;">White Score</td>
                    </tr>
                    <tr>
                       <td id="score-white"></td>
                       <td align="center" style="float: right; padding-top: 5px; padding-right: 20px;">
                          <svg height="48" width="48">
                             <circle cx="24" cy="24" r="23" stroke="black" stroke-width="1" fill="white" />
                          </svg>
                       </td>
                    </tr>
                    <tr>
                       <td id="score-zone-black" colspan="2" style="padding: 5px;">Black Score</td>
                    </tr>
                    <tr>
                       <td id="score-black"></td>
                       <td align="center" style="float: right; margin-top: 5px; padding-right: 20px;">
                          <svg height="48" width="48">
                             <circle cx="24" cy="24" r="23" stroke="white" stroke-width="1" fill="black" />
                          </svg>
                       </td>
                    </tr>
                 </table>
              </div>

图纸尺寸（参见上述功能拉丝（ix、iy、colorIn、colorBorder）的

部分）：

问题是否来自
（481481）
div

和

（480480）的大小

画布的大小？

问题在于具有抗锯齿的堆叠元素，在本例中为蓝色圆圈的边框。当多个抗锯齿边彼此重叠绘制时，会添加不透明度，并会导致边缘出现锯齿

在确定是否渲染可播放点击的函数中：

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

函数显示可播放点击（当前点击，正在显示）{
对于（变量i=0；i<8；i++）
对于（var j=0；j<8；j++）{
if（HitCurrent.ArrayPlayible[i][j]=“可播放”）{
如果（正在显示）
抽件（i，j，HitCurrent.playableColor，HitCurrent.playableBorderColor）；
其他的
deleteHit（i，j）；
}
}
}

---

只有当

isShowing

标志为false时，您才删除“hits”。您需要在draw调用的每次迭代中调用此函数，否则会调用

drawPiece

，并在每个圆的顶部绘制多个圆。

-@jaydeep patel“提供SVG图像”是什么意思？@Jaydeppatel这不是关于SVGs的人！我如何在你的游戏中获得蓝色圆圈？——@Mathyn好的，对不起，我忘了告诉它你点击了“开始游戏”并且在“显示可玩的点击数”之后@chazsolo谢谢，问题是在第687行：我必须在所有情况下调用

deleteHit

，而不仅仅是如果isShowing是真的。

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

// Size of canvas
var width = canvas.width,
    height = canvas.height;
// Radius of each piece
var radius = 0.9 * width/16;  

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