window.devicePixelRatio

最近、Owndにプログラムを組み込むのが楽しくて、いろいろ試している。


整角四角形問題パズルを作ったことは、前にも書いたけど、…

どうも、Canvas上の画像のジャギーが目立つ。

<div></div>の中にinnerHTMLで書いた文字は、綺麗なのにだ。

特に、Nexus7(2013)のスマホモードでも、ピンチアウトで拡大出来るので、拡大すると余計にジャギーが目立つ。

これは、ディスプレイの性能を活かしきれていないのだと判断して、ネットを調べ倒してみた。

すると、

window.devicePixelRatio

という値と、

context.scale()

というものを使えば良さそうだというところまでは理解した。


私のテスト環境として、

ノートパソコン
Nexus7(2013)
HTC J butterfly HTL23

でやってみたところ、window.devicePixelRatioの値はそれぞれ異なった。


ノートパソコン
window.devicePixelRatio = 1

Nexus7(2013)
window.devicePixelRatio = 2

HTC J butterfly HTL23
window.devicePixelRatio = 3

面白いように、違いが出てくれた。


これを調べるのにも、Owndの記事を書いておいた。

window.devicePixelRatio

これを使って、自身の環境のwindow.devicePixelRatioを調べてみましょう。


さて、実際問題として、どのようにすればいいのだろうか。

色々、試行錯誤して、上記の整角四角形問題パズルは、この対策を施し、綺麗に描画されています。

簡単な流れを書いておくと、

var dpr = window.devicePixelRatio;

で実行環境の値を保持する。

html内でのcanvasの大きさは、

htmlでcanvasタグやcssで記述があるならば、

var cvs = document.getElementById('cvs');
var w = cvs.style.width;
var h = cvs.style.height;

のように取得し、javascriptで指定するならば、

var cvs = document.getElementById('cvs');
var w = 400;
var h = 300;
document.getElementById('cvs').style.width = w+'px';
document.getElementById('cvs').style.height = h+'px';

といたように、指定してあることだろう。

実際に描画するCanvasの大きさを、dpr、w、hから算出する。

var cvs.width = w*dpr;
var cvs.height = h*dpr;
var ctx = cvs.getContext('2d');
ctx.scale(dpr,dpr);

後は、cvs.width、cvs.heightを基準に、図を描くということ。


ではでは