CanvasRenderingContext2D.imageSmoothingEnabled
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Canvas 2D API の CanvasRenderingContext2D
.imageSmoothingEnabled
プロパティ は、画像が滑らか(true:既定値)か、またはそうではない(false)かによって、変化するように設定できます。imageSmoothingEnabled
プロパティを取得すると、設定された最新の値が返されます。
このプロパティは、たとえばキャンバスをスケーリングするような、ピクセルアートをテーマにしたゲームに役立ちます。 既定のリサイズアルゴリズムは、ぼやかし効果をかけることで、美しいピクセルを崩してしまいます。このような場合、このプロパティを false
に設定します。image-rendering
プロパティも確認してください。
構文
ctx.imageSmoothingEnabled = value;
オプション
value
- 滑らかな画像かどうかを示す
Boolean
値。
例
imageSmoothingEnabled
プロパティを使用する
これは、スケーリングされた画像で imageSmoothingEnabled
property プロパティを使用するコードスニペットです。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 0, 400, 200);
};
以下のコードを編集して、canvas で変更がライブアップデートされることを確認してみてください:
仕様
ブラウザ実装状況
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから!
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | ? | ? | (有) moz |
? | ? | ? |
[1] バージョン 29 までは、webkit
プレフィックス付きでサポートされています。
関連項目
- このプロパティを定義しているインターフェース:
CanvasRenderingContext2D
image-rendering