2

一部のcanvas2dメソッドには、驚くべき機能があるように見えることに気づきました。特に、context.lineTo(x, y)とcontext.drawImg(imgObj, x, y)メソッド。x、y座標は整数でのみ取得されると思っていましたが、フロートとして指定すると、何か特別なことが起こるようです-ブラウザは、グラフィカルコンポーネントのエッジのピクセルの色を魔法のように調整してペイントするようですそれらは、2つの個別の隣接ピクセル座標の「中間」にあります。

たとえば、ストロークの色が黒であるとすると、を呼び出しますcontext.lineTo(100.2, 0)。x座標100に向かう素敵な黒い線が表示されますが、座標101のピクセルもペイントされていますが、x座標の小数部分に対応しているように見える灰色の陰影がペイントされています（たとえば、context.lineTo(100.4, 0)）。

jsfiddleデモを作成しました

ここでは、画像と線の両方をアニメーション化して、効果を視覚的に示しています。どちらの場合も、下の画像と下の線は、浮動小数点引数をキャンバスメソッドに渡すことでアニメーション化されました。ブラウザが魔法をかけているため、これらが非常にスムーズであることがわかります。高いモニター解像度ではライン効果を確認するのは困難ですが、それはあります。エッジをブレンドするだけでなく、透明感を十分に意識しているように見えるので印象的です。

オペラ、Firefox、そしてクロームはすべてそれをしているようです。

私の質問：
これはどのブラウザ/仕様でも文書化されていますか？
これには用語がありますか？

これを何らかの形のアンチエイリアシングまたは補間と呼びたいのですが、これらの用語のどちらもこれに適しているとは思いません。それが何と呼ばれているのか知りたい。

4

2 に答える 2

2

ほとんどのキャンバスシステムと同様に、HTML5の1つはfloat座標に基づいています。また、丸められた座標は画面のピクセル間にあります。

これは、複数の「実際のピクセル」の上に置いたピクセルをより適切にフィットさせるために、エイリアシングが発生する必要があることを意味します。

これは、線の位置によっては線がぼやけて幅が広くなるため、知っておくべき非常に重要なことです。次の図では、両方の線のalineWidthが1ですが、最初の線はで描画されy=1、2番目の線はで描画されy=4.5ます。

ここに画像の説明を入力してください

この問題について書いたこの投稿を参照してください。この問題に対処する方法の例として、作成した2つの関数を示します（長方形にも同様の関数を使用しています）。より一般的には、線幅を考慮する必要がありますが、画像を使用してロジックを明確にする必要があります。シャープな形状にするには、実際の画面のピクセルを塗りつぶしてみてください。

整数以外の座標で画像を描画すると、画像が滑らかになります。これは、望ましい効果になることはめったにありません。また、補間が発生する必要があるため、パフォーマンスが低下します。通常、画像を画面スケールで描画する場合は、パフォーマンスとオリジナルへの忠実度の両方のために、丸みを帯びた座標でのみ画像を描画する必要があります。

于 2013-01-03T07:48:37.010 に答える
1

ただし、そのキャンバス機能にあまり依存しないでください。速度が低下する可能性があります：http ://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float

于 2013-01-03T08:57:49.230 に答える