web-dev-qa-db-ja.com

CSSを使用するとキャンバスが引き伸ばされますが、「幅」/「高さ」のプロパティで通常

2つのキャンバスがあり、1つはHTML属性widthおよびheightを使用してサイズを調整し、もう1つはCSSを使用します。

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1は本来のように表示されますが、compteur2は表示されません。コンテンツは300x300のキャンバスでJavaScriptを使用して描画されます。

表示に違いがあるのはなぜですか？

alt text

csshtml5canvasheightwidth
178
Sirber

widthおよびheight属性はキャンバスの座標系の幅または高さを決定するのに対し、CSSプロパティは表示されるボックスのサイズを決定するようです。

これは http://www.whatwg.org/html#attr-canvas-width （JSが必要）または http://www.whatwg.org/c#attrで説明されています-canvas-width （おそらくお使いのコンピューターを食べるでしょう）：

canvas要素には、要素のビットマップのサイズを制御する2つの属性があります：widthおよびheight。これらの属性を指定する場合、値は有効な非負整数でなければなりません。非負の整数を解析するためのルールを使用して、数値を取得する必要があります。属性が欠落している場合、またはその値の解析でエラーが返された場合は、代わりにデフォルト値を使用する必要があります。 width属性のデフォルトは300で、height属性のデフォルトは150です。

198
SamB

必要なwidthおよびheightを設定するには、使用できます

canvasObject.setAttribute('width', '475');
37
fermar

<canvas>要素の場合、widthおよびheightのCSSルールは、ページに描画されるキャンバス要素の実際のサイズを設定します。一方、widthおよびheightのHTML属性は、キャンバスAPIが使用する座標系または「グリッド」のサイズを設定します。

たとえば、これを考慮してください（ jsfiddle ）：

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);
canvas {
  border: 1px solid black;
}
<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

どちらも、キャンバス要素の内部座標に対して同じものが描かれています。しかし、2番目のキャンバスでは、CSSルールによってキャンバス全体がより広い領域に引き伸ばされているため、赤い長方形の幅は2倍になります。

注：widthおよび/またはheightのCSSルールが指定されていない場合、ブラウザーはHTML属性を使用して、これらの値の1単位がページ上の1pxと等しくなるように要素のサイズを調整します。これらの属性が指定されていない場合は、300のwidthおよび150のheightがデフォルトになります。

22
Ben Jackson

CSSで幅と高さを設定すると、キャンバスが引き伸ばされます。キャンバスの寸法を動的に操作する場合は、次のようなJavaScriptを使用する必要があります。

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
15
Arindam Mojumder

ブラウザはcssの幅と高さを使用しますが、キャンバス要素はキャンバスの幅と高さに基づいてスケーリングします。 JavaScriptで、CSSの幅と高さを読み取り、キャンバスの幅と高さをそれに設定します。

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
4
Russell Harkins

シャニマル 補正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
2
XaviGuardia

に基づいた動的な動作が必要な場合、 CSSメディアクエリでは、キャンバスの幅と高さの属性を使用しないでください。 CSSルールを使用し、キャンバスレンダリングコンテキストを取得する前に、CSSの幅と高さのスタイルを幅と高さの属性に割り当てます。

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...
0
Manolo