これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
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 で変更がライブアップデートされることを確認してみてください:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:140px;"> 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); };</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
仕様
仕様 | 状態 | コメント |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.imageSmoothingEnabled の定義 |
現行の標準 |
ブラウザ実装状況
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | ? | ? | (有) moz |
? | ? | ? |
[1] バージョン 29 までは、webkit
プレフィックス付きでサポートされています。
関連項目
- このプロパティを定義しているインターフェース:
CanvasRenderingContext2D
image-rendering