6

アップデート

それは間違いなく、キャンバスを再スケーリングする方法に関係しています。同じシーンをキャンバスに描画し、幅と高さを画面いっぱいに変更しないと、完全に機能します。

働く

フルスクリーン環境でキャンバスのサイズを変更する正しい方法は何ですか?

私はキャンバス用のゲームエンジンを書いていますが、画像のアップスケールとエイリアスに問題があります。同様の問題を抱えている人々の回答をいくつか読んでいます。各キャンバスで次の設定を有効にするようにコードを修正しました。

context.webkitImageSmoothingEnabled = false;                                                                                
context.mozImageSmoothingEnabled = false;                                                                                   
context.imageSmoothingEnabled = false;

念のため、これらのルールの 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)
}

これは、私が描こうとしている元の画像の 1 つの例です。

キャラクター

次に、16x16 から 64x64 にアップスケーリングすると、最近傍補間が使用されたように見える代わりに、このようにレンダリングされます。

実結果

Chrome と Firefox で同じ結果が得られます。画像を拡大するための前処理ステップも実行したくありません。このデモは私にとってうまくいくので、それは可能でなければなりません。

言及すべきもう 1 つのことは、エンジンはフルスクリーンで使用するように設計されているため、この関数を使用してキャンバスのサイズを手動で最新の状態に維持していることです。

fill-screen = (canvas) ->
  canvas.width = document.body.clientWidth
  canvas.height = document.body.clientHeight

キャンバスは、親の左上隅に絶対的に配置されます。それ以外には、ブラウザ以外の CSS ルールは動作しません。

たぶん私は何かばかげたことをしているのかもしれませんが、私はこれを何年も見てきたので、近づきません. キャンバスとコンテキストを作成しているファイルのコードは次のとおりです: https://gist.github.com/code-curve/9273248

4

2 に答える 2

3

キャンバスのサイズを変更すると、スムージング設定もリセットされます (ブラウザによって異なります)。

キャンバスのサイズを変更したら、imageSmoothingEnabled.

fill-screen = (canvas) ->
  canvas.width = document.body.clientWidth
  canvas.height = document.body.clientHeight
  // re-apply here on context

サイズの代わりにwindow.innerWidthandを使用することもお勧めします。window.innerHeight

私の (無料の)レトロ コンテキスト ライブラリも興味深いかもしれません。

于 2014-02-28T19:52:40.800 に答える