我正在HTML5画布上创建条形图。它只是用，，and创建的一堆行。代码如下所示。

我对画布比较陌生，但似乎任务很简单。作为一个原型，我在画布上绘制随机长度的线条，以给出条形图在完成的页面上最终会是什么样子的想法。

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

我在Firefox和（基于Chromium的）Edge中尝试过同样的方法，效果总是一样的。我已经更改了for循环中的条件，以绘制更少的线条。不过，最后的少数几个比其余的更不透明。

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

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

看起来像是画布上的某种“淡出”效果，它应该发生在所有边缘，而不仅仅是右边。

以下是显示效果的图像:

.moveTo()

顺晟科技：

为什么图中的最后一条逐渐消失，答案是因为我没有使用and。我想如果没有这一点，我以为我画的是单独的线条，实际上被视为一条大线条的小片段。当我在for循环中添加和时，我从左到右得到了一致的颜色。

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

我相信不透明度的缺乏可能是由于抗锯齿功能。似乎与我目睹的淡入底色一致。一旦我加厚了线条，一切都开始看起来更像我最初期望的那样。

更新后的代码如下所示。

要点是：对于图上的每一行，始终使用and，并使用较粗的一行使其更加突出。

以下是改进的条形图:

.moveTo()