3

ゲームを作っています。このゲームの衝突は、キャンバス上のピクセルの色に基づいています。色のピクセルを取得し、たとえば赤の場合、プレイヤーは移動できません。残念ながら、Firefox の画像はリモートでぼやけています。ピクセルは白から赤に滑らかに変化します。しかし、私はそれを望んでいません。 ここに画像の説明を入力 この問題に答える方法はありますか？

4

1 に答える 1

6

これはアンチエイリアシングと呼ばれ、サイズ変更 (または形状やテキストなどのサブピクセル化) 時に画像を補間した結果です。これは、ブラウザが内部的に行うものです。

ただし、最新バージョンのブラウザーではこれをオフにすることができます。

これがブラウザで機能するかどうか、およびモード間の違いを確認するために行ったテストを次に示します (下の図のように)。下のバージョンは滑らかにしないでください。

ONLINE TEST

ここに画像の説明を入力

このスニペットを CSS スタイル シートに追加します (ブラウザによって機能する場合と機能しない場合があります)。

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

更新:標準 の現在の形式(ステータス「実装の準備ができていません」) は指定されており、可能な将来の標準crisp-edgesではありません。optimize-contrast上記の CSS クラスはこれで更新され、接頭辞なしの値に反映されます。
- 更新終了 -

Webkit ブラウザーの場合、次のように canvas 要素の画像スムージングを無効にすることができます。

context.webkitImageSmoothingEnabled = false;

Mozilla の場合:

context.mozImageSmoothingEnabled = false;

(この後者が利用可能な場合、いずれにせよ避けるべき要素自体をスケーリングしない限り、CSS クラスは必要ありません)。

于 2013-07-12T15:06:16.427 に答える