18

HTML5 キャンバスでピクセル アートをテーマにしたゲームを作成しようとしています。その一環として、10x20 程度のサイズの画像を取得し、次のコードを使用してキャンバスに描画します。

ctx.drawImage(image, 20, 20, 100, 200);

ただし、キャンバスは双三次画像スケーリングを使用するため、ピクセル アート画像は 2 倍以上で見栄えが悪くなります。キャンバスに最近傍スケーリングを強制的に使用させる方法、またはカスタム メソッドを使用して画像をスケーリングする方法はありますか? そうでない場合は、Paint.net などで画像を事前にスケーリングする必要がありますか?

4

1 に答える 1

40

次のいずれかを選択してください。

JavaScript経由：

ctx.imageSmoothingEnabled = false;

ソース：http ：//www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing

Geckoでは、

ctx.mozImageSmoothingEnabled = false;

ソース：https ：//developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes

Webkitでは、次のものが必要になります

ctx.webkitImageSmoothingEnabled = false;

ソース：https ：//bugs.webkit.org/show_bug.cgi？id = 82804

他のブラウザでこのプロパティのサポートに関する情報が見つからなかったため、おそらくサポートされていません。

CSS経由：

もう1つのオプションは、キャンバスで一連のCSSルールを使用することです。例えば：

<canvas id="c" width="16" height="16"></canvas>
<script>
  var c = document.getElementById("c"),
      cx = c.getContext("2d"),
      im = new Image();
  im.src = "http://stackoverflow.com/favicon.ico"; // 16x16
  cx.drawImage(im, 0, 0);
</script>
<style>
  canvas {
    width: 32px;
    height: 32px;
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  }
</style>

ソース：https
：//developer.mozilla.org/en/CSS/image-renderingソース：https ：//bugs.webkit.org/show_bug.cgi？id = 56627

ピクセルルーチン経由：

さらに別のオプションは、キャンバスのピクセル操作ルーチンを使用して自分で行うことです：http ://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation 。ただし、それはもっと多くの作業です。

于 2012-05-09T22:42:41.800 に答える