HTML5中填充笔划的透明度 [英] Transparency of a filled stroke in HTML5

问题描述

我正在使用HTML5中的涂鸦应用程序，我想做一种桶功能。想法是画一条路径，它将被关闭并填充所选择的颜色（笔画的颜色）。它可以很好地与纯色，但如果我想有一个透明的笔触和填充，我遇到这个问题： http://imgur.com/ 0N3MW

会发生什么是填充完成，直到笔划的中间（路径的实际采样点），所以有一行的一半大小

您是否看到任何解决方法？

不幸的是，我现在不能发布到JSFiddle，因为它是在READ ONLY模式。但您应该可以看到我在说的是什么，住在这个沙盒： http://bit.ly/AbaMLl
（网站和图书馆与我使用的内容无关，它只是我发现的一个画布sanbox）

任何想法/领导欢迎：）

解决方案

Simon的回答在当时是正确的，但现在似乎Chrome 36已经更正了一个影响他的解决方案的错误，它不再工作。它在Firefox上无法正常工作，似乎是预期的行为： https：// bugzilla.mozilla.org/show_bug.cgi?id=898375

那么，你该如何做呢？

需要另一个画布。

在此画布上绘制您的填充和描边形状，而不透明（不是颜色和没有globalAlpha）。

现在，绘制设置globalAlpha到任何你想要的您的主画布。

在您的主画布上绘制第一个画布。

将globalAlpha设置为您在主画布上的任何值。

完成。 p>

I'm working on a doodling app in HTML5 and I would like to do a sort of bucket feature. The idea is to draw a path and it will be closed and filled with the selected colour (colour of the stroke). It works quite well with solid colours, but if I want to have a transparent stroke and fill, I run into this problem: http://imgur.com/0N3MW

What happens is the fill is done until the middle of the stroke (the actual sampling point of the path) so there's a line of half the size of the stroke inside the shape which is darker because it's the intersection of the fill and the stroke.

Do you see any workaround for this?

Unfortunately, I can't post to JSFiddle right now because it's on READ ONLY mode. But you should be able to see what I'm talking about live in this sandbox: http://bit.ly/AbaMLl (The website and library is unrelated to what I'm using, it's just a canvas sanbox I found)

Any ideas/leads welcome :)

解决方案

Simon's answer was correct at the time but it now seems that Chrome 36 has corrected a bug which affects his solution and it no longer works. It already didn't work on Firefox and it seems to be the expected behaviour: https://bugzilla.mozilla.org/show_bug.cgi?id=898375

So, how do you get this done?
You first need another canvas.
Draw your filled and stroked shape on this canvas without opacity (not in the colour and no globalAlpha).
Now, draw set the globalAlpha to whatever you want on your main canvas.
Draw the first canvas on your main one.
Set the globalAlpha to whatever you had on your main canvas.
Done.

这篇关于HTML5中填充笔划的透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！