地球，月球和裁剪弧在畫布 - 粗糙的邊緣

Question

所以我擁有它裏面（更小的行星）拉弧旋轉canvas元素有： http://jsfiddle.net/neuroflux/9L689/4/（更新）

但我似乎不能讓小行星邊緣的抗鋸齒更平滑 - 有什麼想法？

乾杯！

編輯：有沒有辦法增加arc內使用的迭代次數？

Answer 1

您的問題不在於圓弧沒有足夠的點數，而是在Chrome中.clip()操作不使用消除鋸齒來產生剪切路徑。

見鉻問題7508和132442

要看到這個動作，看在Chrome http://jsfiddle.net/alnitak/YMtdZ/。

標記：

<canvas id="c" width="600" height="300" /> 

代碼：

var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 

ctx.fillStyle = 'black'; 

ctx.save(); 
ctx.beginPath(); 
ctx.arc(150, 150, 140, 0, 2 * Math.PI); 
ctx.clip(); 
ctx.fillRect(0, 0, 600, 300); 
ctx.restore(); 

ctx.beginPath(); 
ctx.arc(450, 150, 140, 0, 2 * Math.PI); 
ctx.closePath(); 
ctx.fill(); 

左手圓畫有削波，並且被混疊。右邊的圓圈是「正常」繪製的，並且是反鋸齒的。

FWIW，在Firefox和Safari中，兩張圖片看起來都是一樣的。我無法在IE上測試它。

圍繞我可以想象的唯一工作（直到Chrome得到修復）將是將屏幕外的圖像渲染成3或4倍大的畫布，然後將其下采樣複製到顯示的畫布中。