HTML5畫布 - 控制在同一地點繪製時會發生什麼

如何控制當我在與前一行相同的座標中畫線時會發生什麼？目前，顏色變得更明亮，但我希望它保持不變（或更準確地說 - 我希望第二條線位於第一條線的上方）。HTML5畫布 - 控制在同一地點繪製時會發生什麼

我試圖做的：

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

但似乎只在畫布上繪圖畫布時，不一樣的畫布上繪製時工作。

來源

2012-12-06 Erik Sapir

您的問題並不清楚，但可能與您使用的顏色或[模糊座標]中的alpha有關（http://stackoverflow.com/questions/10373695/drawing-lines-in-canvas-but-最後一個 - 褪色）導致大致相同的效果。 –

當我畫畫時，我總是使用整數。和alpha級別永遠是FF –

*「我總是使用整數當我畫」*：這是你的問題，你不應該。請參閱下面的答案。 –

假設你的顏色有一個完整的alpha，你的問題可能與你在整數座標處繪製寬度爲1的線相關。

看看下面的小提琴：http://jsfiddle.net/RAgak/

在整數繪製座標使得線更寬和模糊的。第二次繪製更明亮。但是，當我以半整數座標繪製線條時，不會發生這種情況。

var y = 10; 
c.beginPath(); 
c.moveTo(0, y); 
c.lineTo(30, y); 
c.stroke(); // fuzzy 
c.beginPath(); 
c.moveTo(50, y+0.5); 
c.lineTo(80, y+0.5); 
c.stroke(); // ok

這是由於線被描繪了他們在所有像素（在畫布上positionning是浮動）。當你想在畫布上用javascript繪製精確的垂直或水平線時，最好將它們放在一個整數中。

請看插圖：第一條水平線是用y的1位繪製的。這條線很模糊而且很寬。第二條水平線是用4.5的y位置繪製的。它薄而精確。

enter image description here

的溶液，繪製水平線或垂直線（或rects）至少當，是取線的寬度考慮在內，並在整數或半整數座標繪製。

來源

2012-12-06 09:31:10

這不是問題所在。我嘗試了一半的解決方案，但結果是一樣的。我也確定全局alpha是1.0 –

問題是，如果我從x1，y1到x2，y2繪製一條紅線並且再次繪製相同的線，顏色會變得更亮。 –

看我的小提琴：http://jsfiddle.net/RAgak/1/。對於寬度爲1的行，僅當在整數座標處繪製時（對於水平或垂直線）纔會發生這種情況。 –

HTML5畫布 - 控制在同一地點繪製時會發生什麼

回答

相關問題