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

Planet, Moon and a Clipping Arc in Canvas - Rough Edges

本文关键字：边缘 月亮 布中 行星      更新时间：2023-09-26

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

但我似乎无法让较小星球边缘的抗锯齿更平滑 - 有什么想法吗？

干杯！

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

您的问题不在于弧线没有足够的点，而是在 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 倍大的画布，然后通过下采样将其复制到显示的画布中。

相关文章：