CSS画布路径的交叉点部分的颜色似乎不正确。
提问于 2012-09-23 05:32:31
我正在尝试使用HTML Canvas绘制一条路径。它由链接在一起的多条Bezier曲线组成。由于某些原因，我不能绘制整个路径，然后再进行笔划。相反，我需要为每条Bezier曲线进行笔划。我使用浅紫色作为笔划颜色，但在曲线的交叉点，我似乎得到了类似白色的东西，而不是我期望的浅紫色。就像这样(很抱歉我不能发布图片，因为我是Stack Overflow的新手)：
我使用的是不透明度为1的stroke style，所以我相信这不是一个透明度问题。那么，是什么导致了这个问题呢？
仅供参考，我使用如下代码绘制每条Bezier曲线，其中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(); 非常感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-23 05:47:40
使用HTML5 Canvas context原生支持的适当“混合模式”进行复合操作。在您的情况下，您可以使用'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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12549992
复制
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
