CSS Canvas 路径的交叉部分似乎颜色不正确。

Question

我正在尝试使用HTML Canvas 绘制路径。它由连接在一起的几条贝塞尔曲线组成。出于某种原因，我无法绘制整个路径然后进行描边。相反，我需要为每条贝塞尔曲线描边。我使用浅紫色作为描边颜色，但在曲线的交点处，我似乎得到了类似白色的东西，而不是我期望的浅紫色。像这样（抱歉，由于我是 Stack Overflow 上的新手，所以我无法发布图片）：

我使用的是不透明度为 1 的 stroke style，所以我相信这不是透明度问题。那么可能是什么导致了这个问题呢？

仅供参考，我正在使用这样的代码绘制每条贝塞尔曲线，其中 a 是画布的绘制上下文，this.bloom.c 类似于“rgba(xxx,xxx,xxx,1)”：

a.strokeStyle = this.bloom.c;
a.beginPath();
a.moveTo(e.x, e.y);
a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
a.stroke(); 

非常感谢！

Answer 1

为复合操作使用 HTML5 Canvas 上下文原生支持的适当“混合模式”。在您的情况下，您可以使用 'source-over'

对于example：

var context = document.getElementById('myCanvas').getContext('2d');
context.globalCompositeOperation = 'source-over';

见Compositing and Blending 1.0

source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
xor
copy