Question

上提供了一个小游戏

在这里您可以看到代表两个玩家得分的黑白圆圈的放大。蓝色圆圈是可能的热门歌曲：

我的问题是蓝色圆圈的边框显示效果很差：白色边框绘制得不好，我不明白为什么白色和黑色圆圈的边框很细且显示效果很好。

这是我在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);
   }
  }
}

使用：

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像素偏移的东西，就像我们经常看到的有关Canvas的绘图一样，但我不确定。

欢迎任何帮助。如果您想要有关CSS的更多详细信息，我可以为您提供更多信息（但是，我为您提供了检查元素的链接）。

更新1：我意识到还有另一个问题：图像上的所有圆圈似乎都朝着框（1像素或0.5像素？）的方向稍微向左移动：也许值得在SO上发表另一篇文章。

更新2：，让我们详细介绍一下：主板包含在main 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>

，其中包含othello-wrapper id的以下CSS：

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

以及图纸尺寸（请参见上面的function drawPiece(ix, iy, colorIn, colorBorder）：

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

问题是否来自(481,481)的{{1}}大小和画布的div大小？

Answer 1

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

在用于确定是否呈现可播放匹配的函数中：

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

仅当isShowing标志为false时，您才删除“ hits”。您需要在每次绘图调用的迭代中都调用此函数，否则将调用drawPiece并在彼此之上绘制多个圆。

Canvas游戏中圆形边框的渲染错误

1 个答案: