web-dev-qa-db-fra.com

Comment puis-je obtenir la largeur et la hauteur d'un canevas HTML5?

Comment puis-je obtenir la largeur et la hauteur de l'élément canvas en JavaScript?

Aussi, quel est le "contexte" de la toile sur laquelle je continue de lire?

javascripthtml5canvas
84
clamp

Il pourrait être intéressant de regarder un tutoriel: Tutoriel de Firefox Canvas

Vous pouvez obtenir la largeur et la hauteur d'un élément de canevas en accédant simplement à ses propriétés. Par exemple:

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

Le contexte est un objet que vous obtenez du canevas pour vous permettre de le dessiner.

106
andrewmu

Eh bien, toutes les réponses précédentes ne sont pas tout à fait correctes. 2 des principaux navigateurs ne supportent pas ces 2 propriétés (IE en est une) et ne les utilisent pas différemment.

Meilleure solution (prise en charge par la plupart des navigateurs, mais je n'ai pas vérifié Safari):

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

Au moins, j’obtiens les valeurs correctes avec scrollWidth et -Height et DOIT définir canvas.width et height lorsqu’il est redimensionné.

35
Bitterblue

Les réponses mentionnant canvas.width renvoie les dimensions internes du canevas, c’est-à-dire celles spécifiées lors de la création de l’élément:

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

Si vous redimensionnez le document avec CSS, ses dimensions DOM sont accessibles via .scrollWidth et .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

L'objet de contexte vous permet de manipuler le canevas. vous pouvez dessiner des rectangles par exemple et beaucoup plus.

Si vous voulez obtenir la largeur et la hauteur, vous pouvez simplement utiliser les attributs HTML standard width et height:

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

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

à partir de 2015, tous les navigateurs (principaux?) semblent al_ c.width et c.height pour obtenir la taille de la toile interne , mais:

la question car les réponses sont trompeuses, car le canevas a en principe 2 tailles différentes/indépendantes.

Le "html" permet de dire CSS largeur/hauteur et son propre (attribut) largeur/hauteur

regardez ceci petit exemple de dimensionnement différent , où je mets une toile 200/200 dans un élément html 300/100

Avec la plupart des exemples (tout ce que j'ai vu), il n'y a pas de taille css, ils impliquent donc la largeur et la hauteur de la taille de la zone de dessin. Mais ce n’est pas une obligation et peut produire des résultats amusants si vous prenez la mauvaise taille - c.-à-d. css widht/height pour le positionnement intérieur.

7
halfbit

Aucun de ceux qui ont fonctionné pour moi. Essaye ça.

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