3

widthおよびheight属性を次のように設定することで、キャンバスの幅と高さを設定できます。

<canvas id="canvas" width="510" height="510"></canvas>

しかし、すべての描画コードをこれらの値に依存するようにハードコーディングしたくはありません。「内部」の幅/高さを 100x100 に設定し、それらの座標ですべてを描画し、キャンバスをスケールアウトします (OpenGL で行うのと同じ方法)。そうすれば、キャンバスのサイズを変更しても、うまくレンダリングされます。

キャンバスにCSSの幅と高さを設定すると、キャンバスを大きくすることができますが、同じ単位を維持できることがわかりましたが、実際には結果が引き伸ばされ、ぼやけてひどく見えることがわかりました（まだレンダリングのように見えると思いましたベクトル、素敵で鮮明）。

これを行う方法はありますか？

4

1 に答える 1

4

すべてを「ローカル」座標で描画し、描画時に最初に行うこととして、実際のキャンバスの相対的なサイズでコンテキストをスケーリングできます。

例えば

HTML

<canvas id="c" width="510" height="510"></canvas>

JS

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.scale(5.1,5.1);
// Everything drawn here is in a 100x100 world, 
// but gets scaled to be in the 510x510 canvas
ctx.fillStyle = '#000';
ctx.fillRect(0,0,100,100);
ctx.strokeStyle= '#F00';
ctx.lineWidth = 1;
ctx.strokeRect(5,5,90,90);​​​​​

実行例

于 2012-06-22T04:47:15.963 に答える