CSS Canvas路徑的交叉部分似乎有不正確的顏色。

我試圖畫出一條使用HTML Canvas的路徑。它由幾條連接在一起的貝塞爾曲線組成。出於某種原因，我無法畫出整條道路，然後中風。相反，我需要爲每個貝塞爾曲線中風。我使用淺紫色作爲筆觸顏色，但在曲線的交叉處，我似乎得到了像白色而不是我期望的淺紫色的東西。像這樣（抱歉，我不能，因爲我在堆棧溢出新張貼圖片）：CSS Canvas路徑的交叉部分似乎有不正確的顏色。

picture example

我使用stroke style與不透明1，所以我相信這不是一個透明度的問題。那麼可能會導致這個問題呢？

通知你，我繪製每個貝塞爾曲線像這樣的代碼，其中一個是畫布的繪圖上下文，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();

非常感謝！

來源

2012-09-23 Sunday Lee

+1。在我頭頂，像素以RGBA疊加方式相互複製。 PS：將您的實驗放在http://jsfiddle.net上將允許更快的響應。從我的經驗來看，Webkit和Chrome是canvas HTML5實現中最可靠的，所以在這裏你不會看到太多的區別。 –

另請參閱：設置blendmode繪製筆畫？ http://stackoverflow.com/questions/4939453/set-blendmode-for-drawing-strokes –

使用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

來源

2012-09-23 05:47:40

哇！它像一個魅力！我確實懷疑它與混合模式有關，但不知道如何在HTML Canvas中進行調整。無論如何真的非常感謝你！此外，我還有一個關於我的網站的整個圖片的屏幕截圖，以防萬一你好奇我要去的是什麼〜[圖片]（https://www.dropbox.com/s/b19wxsshsou7wea/Screen%20Shot ％202012-09-23％20at％202.23.58％20 AM.png） –

@SundayLee乾杯！考慮增加另一行例如「結果更新」到您的文章並向我們展示結果... –

CSS Canvas路徑的交叉部分似乎有不正確的顏色。

回答

相關問題