Jak uzyskać szerokość i wysokość płótna HTML5?

Jak uzyskać szerokość i wysokość elementu canvas w JavaScript?

A jaki jest „kontekst” płótna, o którym ciągle czytam?

Warto zajrzeć do samouczka: Samouczek MDN Canvas

Możesz uzyskać szerokość i wysokość elementu canvas po prostu uzyskując dostęp do tych właściwości elementu. Na przykład:

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

Jeśli atrybuty szerokości i wysokości nie są obecne w elemencie canvas, zostanie zwrócony domyślny rozmiar 300x150. Aby dynamicznie uzyskać prawidłową szerokość i wysokość, użyj następującego kodu:

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

Lub używając krótszej składni destrukturyzacji obiektów:

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

contextTo obiekt można uzyskać z płótna, co pozwala wyciągnąć do niego. Możesz myśleć o contextinterfejsie API dla kanwy, który zapewnia polecenia, które umożliwiają rysowanie na elemencie canvas.

Cóż, wszystkie wcześniejsze odpowiedzi nie są całkowicie poprawne. 2 z głównych przeglądarek nie obsługują tych 2 właściwości (IE jest jedną z nich) lub używają ich w inny sposób.

Lepsze rozwiązanie (obsługiwane przez większość przeglądarek, ale nie sprawdzałem Safari):

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

Przynajmniej otrzymuję poprawne wartości za pomocą scrollWidth i -Height i MUSZĘ ustawić canvas.width i height, gdy jest zmieniany.

Odpowiedzi wspominające o canvas.widthzwracaniu wymiarów wewnętrznych płótna, czyli określonych przy tworzeniu elementu:

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

Jeśli dopasujesz płótno do CSS, jego wymiary DOM są dostępne przez .scrollWidthi .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">

Obiekt kontekstu umożliwia manipulowanie kanwą; możesz rysować na przykład prostokąty i wiele więcej.

Jeśli chcesz uzyskać szerokość i wysokość, możesz po prostu użyć standardowych atrybutów HTML widthi height:

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

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

teraz począwszy od 2015 roku wszystkie (główne?) przeglądarki wydają się zezwalać c.widthi c.heightuzyskują wewnętrzny rozmiar płótna , ale:

pytanie jako odpowiedzi jest mylące, ponieważ płótno ma w zasadzie 2 różne / niezależne rozmiary.

„HTML” określa szerokość / wysokość CSS oraz własną (atrybut-) szerokość / wysokość

spójrz na ten krótki przykład różnych rozmiarów , w którym umieściłem płótno 200/200 w elemencie html 300/100

W większości przykładów (wszystkie, które widziałem) nie ma ustawionego rozmiaru css, więc otrzymają one szerokość i wysokość rozmiaru (rysunku) płótna. Ale nie jest to konieczne i może przynieść kiepskie rezultaty, jeśli wybierzesz niewłaściwy rozmiar - tj. css szerokość / wysokość do pozycjonowania wewnętrznego.

Żaden z nich nie pracował dla mnie. Spróbuj tego.

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

Oto CodePen, który używa canvas.height / width, CSS height / width oraz context, aby poprawnie renderować dowolne płótno w dowolnym rozmiarze .

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;
}

JavaScript:

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
  };
}

Zasadniczo plik canvas.height / width określa rozmiar renderowanej mapy bitowej. Wysokość / szerokość CSS następnie skaluje bitmapę, aby dopasować ją do obszaru układu (często wypaczając ją podczas skalowania). Kontekst może następnie zmodyfikować swoją skalę, aby rysować, używając operacji wektorowych, w różnych rozmiarach.

Miałem problem, ponieważ moje płótno znajdowało się w kontenerze bez identyfikatora, więc użyłem poniższego kodu jquery

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