HTML5 Canvas粗線寬橢圓具有奇怪的空白

Question

我正在使用html5 canvas制作繪圖應用程序。 用戶可以繪制橢圓，並選擇線條顏色和填充顏色。 （包括透明顏色）
如果所選顏色不是透明的，則可以正常工作。 但是當選擇透明顏色並且邊框線的寬度很粗時，就會出現問題。（Q1和Q2）

這是圖像
http://tinypic.com/view.php?pic=28ry4z&s=9#.VoRs7U8jHSg

我從下面使用drawEllipse（）方法。
貝塞爾曲線和橢圓的關系？

有誰能解決這個問題？ 任何幫助將不勝感激。

[Q1]當lineWidth大於橢圓的寬度時，橢圓中會出現一個奇怪的空白，並且lineWidth會變薄。 Internet Explorer可以正常工作，但是Firefox和Safari Web瀏覽器都存在此問題。 如何將空白區域更改為藍色？

[Q2]我使用的是透明顏色，我想用2種顏色繪制橢圓。
（描邊為藍色，填充為紅色），但是描邊顏色和填充顏色混合在一起，橢圓中有洋紅色區域。 如何繪制2種顏色的橢圓？
（我想將洋紅色區域更改為藍色）
如果可能的話，最好一次填充一次。

這是我的代碼

 // this method is from // https://stackoverflow.com/questions/14169234/the-relation-of-the-bezier-curve-and-ellipse function _drawEllipse(ctx, x, y, w, h) { var width_over_2 = w / 2; var width_two_thirds = w * 2 / 3; var height_over_2 = h / 2; ctx.beginPath(); ctx.moveTo(x, y - height_over_2); ctx.bezierCurveTo(x + width_two_thirds, y - height_over_2, x + width_two_thirds, y + height_over_2, x, y + height_over_2); ctx.bezierCurveTo(x - width_two_thirds, y + height_over_2, x - width_two_thirds, y - height_over_2, x, y - height_over_2); ctx.closePath(); ctx.stroke(); } function ellipse_test() { var canvas = document.getElementById('sample1'); var ctx = canvas.getContext('2d'); var x = 100; var y = 100; var w = 40; var h = 100; ctx.lineWidth = 30; ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.strokeStyle = "rgba(0,0,255,0.5)"; ctx.globalCompositeOperation = "source-over"; for (var r = 0; r < 50; r++) { _drawEllipse(ctx, x, y, r, r * 2); ctx.fill(); x += 60; if (x > 1000) { x = 100; y += 200; } } } ellipse_test(); 

 <canvas id="sample1" style="border:1px solid blue; background:black;" width="1200" height="800"></canvas> 

這是Firefox上的圖像

Answer 1

這兩個問題都是由於一個區域上的多個筆觸/半透明顏色的填充會導致該區域變成顏色的混合而產生的（就像藝術家混合了多種顏色一樣）。

您可以通過將半透明顏色轉換為不透明顏色來解決這兩個問題：

function RGBAtoRGB(r, g, b, a, backgroundR,backgroundG,backgroundB){
  var r3 = Math.round(((1 - a) * backgroundR) + (a * r))
  var g3 = Math.round(((1 - a) * backgroundG) + (a * g))
  var b3 = Math.round(((1 - a) * backgroundB) + (a * b))
  return "rgb("+r3+","+g3+","+b3+")";
} 

// convert 50%-red foreground fill + 100% black background into opaque (=="red-brownish")
ctx.fillStyle = RGBAtoRGB(255,0,0,0.50, 0,0,0,1); // "rgba(255,0,0,0.5)";

// convert 50%-blue foreground stroke + 100% black background into opaque (=="blueish")
ctx.strokeStyle = RGBAtoRGB(0,0,255,0.50, 0,0,0,1); // "rgba(0,0,255,0.5)";

重構示例代碼以使用不透明的填充和筆觸：

 ellipse_test(); // this method is from // http://stackoverflow.com/questions/14169234/the-relation-of-the-bezier-curve-and-ellipse function _drawEllipse(ctx, x, y, w, h) { var width_over_2 = w / 2; var width_two_thirds = w * 2 / 3; var height_over_2 = h / 2; ctx.beginPath(); ctx.moveTo(x, y - height_over_2); ctx.bezierCurveTo(x + width_two_thirds, y - height_over_2, x + width_two_thirds, y + height_over_2, x, y + height_over_2); ctx.bezierCurveTo(x - width_two_thirds, y + height_over_2, x - width_two_thirds, y - height_over_2, x, y - height_over_2); ctx.closePath(); } function ellipse_test() { var canvas = document.getElementById('sample1'); var ctx = canvas.getContext('2d'); var x = 100; var y = 100; var w = 40; var h = 100; ctx.lineWidth = 30; ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = RGBAtoRGB(255, 0, 0, 0.50, 0, 0, 0, 1); // "rgba(255,0,0,0.5)"; ctx.strokeStyle = RGBAtoRGB(0, 0, 255, 0.50, 0, 0, 0, 1); // "rgba(0,0,255,0.5)"; ctx.globalCompositeOperation = "source-over"; for (var r = 0; r < 50; r++) { _drawEllipse(ctx, x, y, r, r * 2); ctx.stroke(); ctx.fill(); x += 60; if (x > 1000) { x = 100; y += 200; } } } function RGBAtoRGB(r, g, b, a, backgroundR, backgroundG, backgroundB) { var r3 = Math.round(((1 - a) * backgroundR) + (a * r)) var g3 = Math.round(((1 - a) * backgroundG) + (a * g)) var b3 = Math.round(((1 - a) * backgroundB) + (a * b)) return "rgb(" + r3 + "," + g3 + "," + b3 + ")"; } 

 body { background-color: ivory; } #canvas { border: 1px solid red; background-color=black; } 

 <canvas id="sample1" width=1200 height=800></canvas> 

重疊

...而且很顯然，如果將橢圓非常緊密地拉在一起，它們最終將重疊。 這就是導致Q1線變薄的原因。