所以我有一个旋转的 canvas
元素,里面画了一个圆弧(较小的行星):
http://jsfiddle.net/neuroflux/9L689/4/ (更新)
但我似乎无法让较小行星边缘的抗锯齿变得更平滑 - 有什么想法吗?
干杯!
编辑:有没有办法增加 arc
中使用的迭代次数?
最佳答案
您的问题不是圆弧没有足够的点,而是在 Chrome 中 .clip()
操作不使用抗锯齿来产生剪切路径。
要查看实际效果,请查看 http://jsfiddle.net/alnitak/YMtdZ/在 Chrome 中。
标记:
<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 倍大的 Canvas 中,然后通过下采样将其复制到显示的 Canvas 中。
关于javascript - Canvas 中的行星、月亮和剪裁弧 - 粗糙边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11204953/