web-dev-qa-db-ja.com

HTML5キャンバスの幅と高さを取得するにはどうすればよいですか？

JavaScriptでキャンバス要素の幅と高さを取得するにはどうすればよいですか？

また、私が読み続けているキャンバスの「コンテキスト」とは何ですか？

javascripthtml5canvas
84
clamp

チュートリアルを見る価値があるかもしれません： Firefox Canvas Tutorial

要素のプロパティにアクセスするだけで、キャンバス要素の幅と高さを取得できます。例えば：

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

コンテキストは、キャンバスから描画できるようにするためにキャンバスから取得するオブジェクトです。

106
andrewmu

さて、以前のすべての答えは完全に正しいわけではありません。主要なブラウザのうち2つは、これらの2つのプロパティをサポートしていません（IEはその1つです）。

より良いソリューション（ほとんどのブラウザーでサポートされていますが、Safariをチェックしませんでした）：

var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

少なくともscrollWidthと-Heightで正しい値を取得し、リサイズ時にcanvas.widthとheightを設定する必要があります。

35
Bitterblue

canvas.widthに言及する回答は、キャンバスの内部寸法、つまり要素の作成時に指定された寸法を返します。

<canvas width="500" height="200">

CSSを使用してキャンバスのサイズを設定すると、そのDOMディメンションには.scrollWidthおよび.scrollHeightからアクセスできます。

var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
      canvasContext.canvas.width +
      ' x ' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);
<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">
18
Dan Dascalescu

コンテキストオブジェクトを使用すると、キャンバスを操作できます。たとえば、四角形を描くことができます。

幅と高さを取得する場合は、標準のHTML属性widthおよびheightを使用できます。

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

alert( canvas.width );
alert( canvas.height );
17
Harmen

2015年以降、すべての（メジャー？）ブラウザーはc.widthおよびc.heightを低くして、キャンバスinternalサイズを取得しているようですが、

キャンバスには原則として2つの異なる/独立したサイズがあるため、答えとしての質問は誤解を招く可能性があります。

「html」は、CSSの幅/高さと、独自の（属性）の幅/高さを言います。

これを見てください 異なるサイズの短い例 、ここでは200/200のキャンバスを300/100のHTML要素に入れます

ほとんどの例（私が見たすべて）にはcssサイズが設定されていないため、これらは（描画）キャンバスサイズの幅と高さを暗示します。しかし、これは必須ではありません。間違ったサイズを選択すると、面白い結果が得られます。内部配置のためのCSS幅/高さ。

7
halfbit

それらのどれも私のために働いた。これを試して。

console.log($(canvasjQueryElement)[0].width)
0
Subtopic