为啥我的 HTML5 画布边缘的线条变得不那么不透明？
Posted
技术标签:
【中文标题】为啥我的 HTML5 画布边缘的线条变得不那么不透明？【英文标题】：Why are lines becoming less opaque at edge of my HTML5 canvas?为什么我的 HTML5 画布边缘的线条变得不那么不透明？ 【发布时间】：2021-11-23 20:17:00 【问题描述】：我正在 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" style="border: 1px solid lightgray;"></canvas>
</body>
</html>
【问题讨论】：
有趣的注释：我切换了前循环，所以线条将从右向左绘制，for (let i=730; i>0; i-=5)，现在左侧的线条不那么不透明了。
【参考方案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" style="border: 1px solid lightgray;"></canvas>
</body>
</html>
【讨论】：
以上是关于为啥我的 HTML5 画布边缘的线条变得不那么不透明？的主要内容，如果未能解决你的问题，请参考以下文章