为什么我的 HTML5 画布边缘的线条变得不那么不透明？答案

【问题标题】：Why are lines becoming less opaque at edge of my HTML5 canvas?为什么我的 HTML5 画布边缘的线条变得不那么不透明？
【发布时间】：2023-03-11 18:29:02
【问题描述】：

我正在 HTML5 画布上创建条形图。这只是用.moveTo()、.lineTo() 和.stroke() 创建的一堆行。代码在下面。

我对画布比较陌生，但任务似乎很简单。作为原型，我在画布上绘制随机长度的线条，以了解条形图在完成页面上的最终外观。

问题是，画布最右边的线条变得不那么不透明了。

我在 Firefox 和（基于 Chromium 的）Edge 中尝试过同样的事情，效果总是一样的。我已经更改了 for 循环中的条件以绘制更少的行。不过，最后一把左右的透明度比其他的少。

为了确保不是我的显示器或眼睛在耍花招，我截取了一张屏幕截图并使用 GIMP 中的滴管工具来获取颜色值。它的范围从我想要的 #0000FF 到 #1010FF、#2020FF，最后是图最右侧的 #7F7FFF。

谁能解释为什么会发生这种情况以及我可以做些什么来纠正它？

如果它是画布上的某种“淡出”效果，它似乎应该发生在所有边缘，而不仅仅是向右。

这是显示效果的图像：

<!DOCTYPE html>

<html>
  <head>
    <title>Bar Graph</title>
    <script>
      function draw() {
        inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d');
        inverterOutputCanvas.strokeStyle = '#0000FF';
        for (let i=0; i<730; i+=5) {
          inverterOutputCanvas.moveTo(i+2, 100);
          inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100));
          inverterOutputCanvas.stroke();
        }
      }
    </script>
  </head>

  <body onload="draw();">
    <canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas>
  </body>
</html>

【问题讨论】：

有趣的注释：我切换了前循环，所以线条将从右向左绘制，for (let i=730; i>0; i-=5)，现在左侧的线条不那么不透明了。

标签： javascript html canvas html5-canvas

【解决方案1】：

为什么图表中的最后一个条形逐渐消失的答案是因为我没有使用.beginPath() 和.closePath()。我想如果没有这个，我认为我画的单条线实际上被视为一条大线的一小段。当我在 for 循环中添加 .beginPath() 和 .closePath() 时，我从左到右一直保持一致的颜色。

但是，它的不透明性比我预期的要低得多。

我相信缺乏不透明度可能是由于抗锯齿功能。这似乎与我目睹的背景颜色的褪色一致。一旦我用inverterOutputCanvas.lineWidth = 3; 加粗了线条，一切都开始看起来更像我最初的预期。

更新后的代码如下。

关键要点是：始终使用.beginPath() 和.closePath() 表示图表上的每条线，并使用更粗的线使其更加突出。

这是改进后的条形图：

<!DOCTYPE html>

<html>
  <head>
    <title>Bar Graph</title>
    <script>
      function draw() {
        inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d');
        inverterOutputCanvas.strokeStyle = '#0000FF';
        inverterOutputCanvas.lineWidth = 3;
        for (let i=0; i<730; i+=5) {
          inverterOutputCanvas.beginPath();
          inverterOutputCanvas.moveTo(i+2, 100);
          inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100));
          inverterOutputCanvas.stroke();
          inverterOutputCanvas.closePath();
        }
      }
    </script>
  </head>

  <body onload="draw();">
    <canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas>
  </body>
</html>

【讨论】：