Question

所以我有一个旋转的canvas元素，其中有一个弧线（较小的行星）： http://jsfiddle.net/neuroflux/9L689/4/（已更新）

但我似乎无法在较小的行星边缘上获得抗锯齿 - 任何想法都会出现？

干杯！

编辑有没有办法增加arc内使用的迭代次数？

Answer 1

问题不在于弧线没有足够的点，但在Chrome中，.clip()操作不会使用消除锯齿来产生剪切路径。

请参阅Chromium问题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倍大的画布，然后将下采样复制到显示的画布中。

行星，月亮和帆布中的剪切弧 - 粗糙的边缘

1 个答案: