1

canvasそのため、内部に弧が描かれ た回転要素があります(小さい惑星): http://jsfiddle.net/neuroflux/9L689/4/ (更新)

しかし、小さな惑星の端のアンチエイリアシングをより滑らかにすることはできないようです - 何かアイデアはありますか?

乾杯！

編集:内で使用される反復回数を増やす方法はありarcますか?

4

1 に答える 1

3

あなたの問題は、アークに十分なポイントがないことではありませんが、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 倍大きいキャンバスにレンダリングし、それをダウンサンプリングして表示されたキャンバスにコピーすることです。

于 2012-06-27T08:42:50.807 に答える