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

Question

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

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

仅供引用，我正在用这样的代码绘制每条贝塞尔曲线，其中 a 是 Canvas 的绘图上下文，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