地球，月球和裁剪弧在画布 - 粗糙的边缘

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倍大的画布，然后将其下采样复制到显示的画布中。