Javascript 行星、月亮和画布上的一条剪裁弧线-粗糙边缘
所以我有一个旋转的Javascript 行星、月亮和画布上的一条剪裁弧线-粗糙边缘,javascript,canvas,Javascript,Canvas,所以我有一个旋转的画布元素,里面画了一条弧(较小的行星): (更新) 但我似乎无法使较小行星边缘的抗锯齿更平滑-有什么想法吗 干杯 编辑:是否有办法增加圆弧中使用的迭代次数?您的问题不是圆弧没有足够的点,而是在Chrome中,.clip()操作没有使用抗锯齿来生成剪切路径 见铬问题和 若要查看此操作,请查看Chrome中的 标记: <canvas id="c" width="600" height="300" /> 左手边的圆是通过剪裁绘制的,并且具有别名。右侧的圆是“正常”绘制
画布
元素,里面画了一条弧(较小的行星):
(更新)
但我似乎无法使较小行星边缘的抗锯齿更平滑-有什么想法吗
干杯
编辑:是否有办法增加
圆弧中使用的迭代次数?您的问题不是圆弧没有足够的点,而是在Chrome中,.clip()
操作没有使用抗锯齿来生成剪切路径
见铬问题和
若要查看此操作,请查看Chrome中的
标记:
<canvas id="c" width="600" height="300" />
左手边的圆是通过剪裁绘制的,并且具有别名。右侧的圆是“正常”绘制的,并且是抗锯齿的
FWIW,在Firefox和Safari中,两个图像看起来都一样。我不能在IE上测试它
我能想象的唯一解决办法(在Chrome修复之前)是将屏幕外的图像渲染到3到4倍大的画布上,然后通过向下采样将其复制到显示的画布上。图像和脚本正在404!道歉-更新问题
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();