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

Program / 글쓴이

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

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

답변

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

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

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

너비 및 높이 속성이 캔버스 요소에 없으면 기본 300×150 크기가 반환됩니다. 올바른 너비와 높이를 동적으로 얻으려면 다음 코드를 사용하십시오.

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

또는 더 짧은 객체 비 구조화 구문을 사용합니다.

const { width, height } = canvas.getBoundingClientRect();

은 context당신이 그것으로 그릴 수 있도록 캔버스에서 얻을 개체입니다. context캔버스 요소에 그릴 수있는 명령을 제공하는 캔버스에 대한 API로 생각할 수 있습니다 .

답변

글쎄, 이전의 모든 답변이 완전히 정확하지는 않습니다. 주요 브라우저 중 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 );

답변

이제 모든 (주요?) 브라우저 ALOW 것 같다 2015 년 시작 c.width과 c.height캔버스 얻기 위해 내부를 크기 .

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

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

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

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

답변

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

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

답변

다음은 canvas.height / width, CSS 높이 / 너비 및 컨텍스트를 사용하여 모든 크기의 캔버스를 올바르게 렌더링하는 CodePen입니다. .

HTML :

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>

CSS :

canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;
}

자바 스크립트 :

const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() {
  let dimensions = getObjectFitSize(
    true,
    myCanvas.clientWidth,
    myCanvas.clientHeight,
    myCanvas.width,
    myCanvas.height
  );
  myCanvas.width = dimensions.width;
  myCanvas.height = dimensions.height;

  let ctx = myCanvas.getContext("2d");
  let ratio = Math.min(
    myCanvas.clientWidth / originalWidth,
    myCanvas.clientHeight / originalHeight
  );
  ctx.scale(ratio, ratio); //adjust this!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();
}

// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

기본적으로 canvas.height / width는 렌더링 할 비트 맵의 ​​크기를 설정합니다. 그런 다음 CSS 높이 / 너비는 레이아웃 공간에 맞게 비트 맵의 ​​크기를 조정합니다 (종종 크기를 조정할 때 뒤틀림). 그런 다음 컨텍스트는 벡터 작업을 사용하여 다양한 크기로 그릴 배율을 수정할 수 있습니다.