We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

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 で変更がライブアップデートされることを確認してみてください:

仕様

仕様 状態 コメント
HTML Living Standard
CanvasRenderingContext2D.imageSmoothingEnabled の定義
現行の標準  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 30 [1] (有)
moz
(有)
ms
? ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? (有)
moz
? ? ?

[1] バージョン 29 までは、webkit プレフィックス付きでサポートされています。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: YuichiNukiyama
最終更新者: YuichiNukiyama,