CSS畫布圓平滑度

Question

我在畫布上畫了一個圓圈，其中一個頂部，問題是您可以通過前面一個（紅色輪廓）看到背部。有沒有辦法改善這一點？

我能想到的唯一的事情是增加頂部的大小（lineWidth by pixel或2）以完全覆蓋後面的一個。

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var canvas2 = document.getElementById('myCanvas2'); 
 
var context2 = canvas2.getContext('2d'); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 70; 
 

 
for (var i = 0; i < 1; i++) { 
 

 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 

 
    context.lineWidth = 25; 
 
    context.strokeStyle = '#ff0000'; 
 
    context.stroke(); 
 
} 
 

 
for (var i = 0; i < 1; i++) { 
 

 
    context2.beginPath(); 
 
    context2.arc(centerX, centerY, radius, 0, 2.5, false); 
 

 
    context2.lineWidth = 25; 
 
    context2.strokeStyle = '#fff'; 
 
    context2.stroke(); 
 
}

#myCanvas, 
 
#myCanvas2{ 
 
    position:absolute; 
 
}

<canvas id="myCanvas" width="578" height="200"></canvas> 
 
<canvas id="myCanvas2" width="578" height="200"></canvas>

https://jsfiddle.net/0zs2gqxk/3/

Answer 1

我想這是由於所謂抗鋸齒效果是在瀏覽器中呈現的一個直接結果。

作爲修復您可以指定起始角度爲紅色弧線，這樣纔不會出現問題 - 見演示以下（一background已添加到body用於說明）：

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var canvas2 = document.getElementById('myCanvas2'); 
 
var context2 = canvas2.getContext('2d'); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 70; 
 

 
for (var i = 0; i < 1; i++) { 
 

 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 2.5, 2 * Math.PI, false); /* CHANGED HERE*/ 
 

 
    context.lineWidth = 25; 
 
    context.strokeStyle = '#ff0000'; 
 
    context.stroke(); 
 
} 
 

 
for (var i = 0; i < 1; i++) { 
 

 
    context2.beginPath(); 
 
    context2.arc(centerX, centerY, radius, 0, 2.5, false); 
 

 
    context2.lineWidth = 25; 
 
    context2.strokeStyle = '#fff'; 
 
    context2.stroke(); 
 
}

body { 
 
    background: #ddd; 
 
} 
 
#myCanvas, 
 
#myCanvas2 { 
 
    position: absolute; 
 
}

<canvas id="myCanvas" width="578" height="200"></canvas> 
 
<canvas id="myCanvas2" width="578" height="200"></canvas>