为什么我的 HTML5 canvas 边缘的线条变得不那么透明了？

Question

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

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

问题是，canvas 最右边缘的线条明显变得不透明。

我在 Firefox 和（基于 Chromium 的）Edge 中尝试过相同的操作，效果始终相同。我已经更改了 for 循环中的条件以绘制更少的行。尽管如此，最后的少数还是比其他的更不透明。

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

任何人都可以解释为什么会发生这种情况以及我可以做些什么来纠正它吗？

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

这是显示效果的图片：

<!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>

Answer 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>

为什么我的 HTML5 canvas 边缘的线条变得不那么透明了？

Why are lines becoming less opaque at edge of my HTML5 canvas?

html

javascript

canvas

html5-canvas