Wie erhalte ich die Breite und Höhe eines HTML5-Canvas?

Lesezeit: 6 Minuten

Benutzer-Avatar
Klemme

Wie kann ich die Breite und Höhe des Canvas-Elements in JavaScript abrufen?

Was ist auch der “Kontext” der Leinwand, über die ich ständig lese?

Benutzer-Avatar
andrewmu

Es könnte sich lohnen, sich ein Tutorial anzusehen: MDN-Canvas-Tutorial

Sie können die Breite und Höhe eines Canvas-Elements abrufen, indem Sie einfach auf diese Eigenschaften des Elements zugreifen. Zum Beispiel:

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

Wenn die Attribute width und height im Canvas-Element nicht vorhanden sind, wird die Standardgröße 300 x 150 zurückgegeben. Verwenden Sie den folgenden Code, um dynamisch die richtige Breite und Höhe zu erhalten:

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

Oder verwenden Sie die kürzere Objektdestrukturierungssyntax:

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

Das context ist ein Objekt, das Sie von der Leinwand erhalten, damit Sie darauf zeichnen können. Sie können an die denken context als API zum Canvas, das Ihnen die Befehle zur Verfügung stellt, mit denen Sie auf dem Canvas-Element zeichnen können.

  • Beachten Sie, dass das Mozilla-Tutorial jetzt leider im Grunde ein Haufen kaputter Links ist. Hoffe, sie werden es eines Tages reparieren.

    – Gr.

    18. Juni 2013 um 12:05 Uhr


  • Dies gibt die Kontext-Canvas-Größe in Chrome 31 zurück.

    – Shuji

    3. Dezember 2013 um 4:09 Uhr

  • das geht nur wenn width und height werden direkt als angegeben <canvas /> Tag-Attribute

    – Wladkras

    7. März 2017 um 14:40 Uhr

  • Das ist nicht wahr. Es gibt immer einen Wert zurück, auch ohne Tag-Attribute, standardmäßig 300 x 150.

    – Michael Theriot

    28. Mai 2018 um 3:09 Uhr

  • @Z80 – Dein canvas ist ein 2D-Kontext, nicht die Leinwand. canvas Oben ist das HTML-Canvas-Element, kein 2D-Kontext.

    – TJ Crowder

    17. August 2021 um 10:42 Uhr

Benutzer-Avatar
Bitter blau

Nun, alle Antworten davor sind nicht ganz richtig. 2 der wichtigsten Browser unterstützen diese 2 Eigenschaften nicht (IE ist eine davon) oder verwenden sie anders.

Bessere Lösung (wird von den meisten Browsern unterstützt, aber ich habe Safari nicht überprüft):

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

Zumindest bekomme ich mit scrollWidth und -Height korrekte Werte und MUSS canvas.width und height setzen, wenn die Größe geändert wird.

  • IE9 scheint canvas.width und height in Ordnung zu unterstützen (Versionen vor 9 unterstützten canvas überhaupt nicht), ich habe es gerade ausprobiert. Auf welche Schwierigkeiten sind Sie gestoßen? Und welches ist der andere große Browser?

    – thomaski

    30. Dezember 2012 um 0:11 Uhr

  • Richtig, ich aktualisiere den IE wirklich nie, weil ich ihn nicht verwende. Der andere große Browser ist Opera, der die Breite und Höhe während der Größenänderung nicht aktualisiert hat.

    – Bitter blau

    3. Januar 2013 um 10:17 Uhr


  • canvas.width oder height geben nicht die Gesamtgröße der Leinwand zurück, ziehen Sie canvas.scrollWidth oder height vor, um die tatsächliche Gesamtgröße der Leinwand zu erhalten.

    – Jordanien

    11. August 2014 um 9:40 Uhr

  • Das hat bei mir funktioniert, aber die anderen Antworten nicht. Ich suchte nach einer Lösung, die die Breite und Höhe erhalten konnte, wenn die Leinwand mit Bootstrap festgelegt wurde.

    – wanderer0810

    19. Dezember 2017 um 1:11 Uhr

Benutzer-Avatar
Dan Dascalescu

Die Antworten erwähnen canvas.width gibt die Innenabmessungen der Leinwand zurück, dh diejenigen, die beim Erstellen des Elements angegeben wurden:

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

Wenn Sie die Größe der Leinwand mit CSS anpassen, sind ihre DOM-Dimensionen über zugänglich .scrollWidth und .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">

  • das war die richtige Antwort. 2 Dimensionen zu berücksichtigen.

    – Nadir

    17. Januar 2016 um 2:39 Uhr

  • Dies sollte die ausgewählte Antwort sein. Direkte width und height Der Aufruf gibt immer 300 x 150 zurück, wenn Sie keine Werte angeben und die relative Größe verwenden (bei Verwendung von Bootstrap usw.). Vielen Dank.

    – Mccy

    5. Februar 2016 um 9:30 Uhr

Benutzer-Avatar
Harmen

Mit dem Kontextobjekt können Sie die Zeichenfläche manipulieren; Sie können zum Beispiel Rechtecke zeichnen und vieles mehr.

Wenn Sie die Breite und Höhe erhalten möchten, können Sie einfach die Standard-HTML-Attribute verwenden width und height:

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

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

jetzt ab 2015 scheinen alle (großen?) Browser dies zu ermöglichen c.width und c.height um die Leinwand zu bekommen intern Größe, aber:

Die Frage wie die Antworten sind irreführend, da eine Leinwand im Prinzip 2 verschiedene/unabhängige Größen hat.

Das “html” sagt CSS Breite/Höhe und seine eigene (Attribut-) Breite/Höhe

Schau dir das an kurzes Beispiel für verschiedene Größenwo ich eine 200/200-Leinwand in ein 300/100-HTML-Element eingefügt habe

Bei den meisten Beispielen (alles, was ich gesehen habe) ist keine CSS-Größe festgelegt, daher erhalten diese implizit die Breite und Höhe der (Zeichnungs-) Leinwandgröße. Aber das ist kein Muss und kann zu komischen Ergebnissen führen, wenn Sie die falsche Größe nehmen – dh. css Breite/Höhe für innere Positionierung.

Benutzer-Avatar
Unterthema

Keines davon hat bei mir funktioniert. Versuche dies.

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

Benutzer-Avatar
DoomGoober

Hier ist ein CodePen, der canvas.height/width, CSS height/width und context verwendet, um jede Leinwand in jeder Größe korrekt wiederzugeben.

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

Grundsätzlich legt canvas.height/width die Größe der Bitmap fest, auf die Sie rendern. Die CSS-Höhe/-Breite skaliert dann die Bitmap, um sie an den Layoutbereich anzupassen (wobei sie beim Skalieren oft verzerrt wird). Der Kontext kann dann seinen Maßstab ändern, um unter Verwendung von Vektoroperationen in verschiedenen Größen zu zeichnen.

1225880cookie-checkWie erhalte ich die Breite und Höhe eines HTML5-Canvas?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy