1

所以我有一个旋转canvas元素,里面有一个弧线(较小的行星):http: //jsfiddle.net/neuroflux/9L689/4/(更新)

但我似乎无法让小行星边缘的抗锯齿更平滑——有什么想法吗?

干杯!

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

4

1 回答 1

3

您的问题不在于弧线没有足够的点,而是在 Chrome 中该.clip()操作不使用抗锯齿来生成剪切路径。

请参阅铬问题7508132442

要查看实际情况,请查看 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 倍的画布中,然后通过下采样将其复制到显示的画布中。

于 2012-06-27T08:42:50.807 回答