HTML5 캔버스의 너비와 높이는 어떻게 얻습니까?

HTML5 캔버스의 너비와 높이는 어떻게 얻습니까?

---

JavaScript에서 캔버스 요소의 너비와 높이를 어떻게 얻을 수 있습니까?

또한 내가 계속 읽는 캔버스의 "문맥"은 무엇입니까?

---

튜토리얼을 살펴볼 가치가 있습니다 : Firefox Canvas Tutorial

요소의 속성에 액세스하여 캔버스 요소의 너비와 높이를 얻을 수 있습니다. 예를 들면 :

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

컨텍스트는 캔버스에서 가져올 수있는 개체입니다.

---

글쎄, 이전의 모든 답변이 완전히 정확하지는 않습니다. 주요 브라우저 중 2 개는 이러한 2 개의 속성을 지원하지 않거나 (IE가 그중 하나임) 다르게 사용합니다.

더 나은 솔루션 (대부분의 브라우저에서 지원되지만 Safari는 확인하지 않음) :

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

적어도 scrollWidth 및 -Height로 올바른 값을 얻고 크기를 조정할 때 canvas.width 및 height를 설정해야합니다.

---

언급 된 답변 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">

---

컨텍스트 개체를 사용하면 캔버스를 조작 할 수 있습니다. 예를 들어 직사각형 등을 그릴 수 있습니다.

당신은 폭과 높이를 얻고 싶은 경우에, 당신은 표준 HTML 속성을 사용할 수 있습니다 width및 height:

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

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

---

이제 2015 년부터 모든 (주요?) 브라우저가 느리고 캔버스 내부 크기 를 얻는 것처럼 보이지만 다음 c.width과 같습니다 .c.height

캔버스는 원칙적으로 2 개의 서로 다른 / 독립적 인 크기를 가지고 있기 때문에 대답으로서의 질문은 잘못된 것입니다.

"html"은 CSS 너비 / 높이 및 자체 (속성) 너비 / 높이를 말할 수 있습니다.

200/200 캔버스를 300/100 html 요소에 넣은 다른 크기 조정의 짧은 예를 보십시오.

대부분의 예제 (내가 본 모든 것)에는 css-size 세트가 없으므로 (drawing-) 캔버스 크기의 너비와 높이를 암시합니다. 그러나 그것은 필수가 아니며 잘못된 크기를 선택하면 재미있는 결과를 얻을 수 있습니다. 내부 위치 지정을위한 css 너비 / 높이.

---

그들 중 어느 것도 나를 위해 일하지 않았습니다. 이 시도.

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

---

내 캔버스가 ID가없는 컨테이너 내부에 있었기 때문에 문제가 있었으므로 아래 jquery 코드를 사용했습니다.

$('.cropArea canvas').width()

참고 URL : https://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas