web-dev-qa-db-fra.com

Le canevas est étiré lors de l'utilisation de CSS mais normal avec les propriétés "width" / "height"

J'ai 2 toiles, l'une utilise les attributs HTML width et height pour la redimensionner, l'autre utilise CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 s'affiche comme il se doit, mais pas compteur2. Le contenu est dessiné en JavaScript sur une toile 300x300.

Pourquoi y a-t-il une différence d'affichage?

alt text

csshtml5canvasheightwidth
178
Sirber

Il semble que les attributs width et height déterminent la largeur ou la hauteur du système de coordonnées du canevas, tandis que les propriétés CSS déterminent simplement la taille de la zone dans laquelle il sera affiché.

Ceci est expliqué à http://www.whatwg.org/html#attr-canvas-width (nécessite JS) ou http://www.whatwg.org/c#attr -canvas-width (va probablement manger votre ordinateur):

L'élément canvas a deux attributs pour contrôler la taille du bitmap de l'élément: width et height. Ces attributs, lorsqu'ils sont spécifiés, doivent avoir des valeurs qui sont des entiers non négatifs valides . Les règles pour l'analyse d'entiers non négatifs doivent être utilisées pour obtenir leurs valeurs numériques. Si un attribut est manquant ou si l'analyse de sa valeur renvoie une erreur, vous devez utiliser la valeur par défaut. L'attribut width par défaut est 300 et l'attribut height par défaut est 150.

198
SamB

Pour définir les width et height dont vous avez besoin, vous pouvez utiliser

canvasObject.setAttribute('width', '475');
37
fermar

Pour <canvas> éléments, les règles CSS pour width et height définissent la taille réelle de l’élément de toile qui sera dessiné sur la page. D'autre part, les attributs HTML de width et height définissent la taille du système de coordonnées ou de la "grille" que l'API de la toile utilisera.

Par exemple, considérons ceci ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);
canvas {
  border: 1px solid black;
}
<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Tous les deux ont eu la même chose dessinée sur eux par rapport aux coordonnées internes de l'élément de la toile. Mais dans la seconde toile, le rectangle rouge sera deux fois plus large, car la toile dans son ensemble est étirée sur une zone plus grande par les règles CSS.

Remarque: Si les règles CSS pour width et/ou height ne sont pas spécifiées, le navigateur utilisera les attributs HTML pour dimensionner l'élément de telle sorte qu'une unité de ces valeurs soit égale à 1 pixel sur la page. . Si ces attributs ne sont pas spécifiés, ils utiliseront par défaut un width sur 300 et un height de 150.

22
Ben Jackson

La toile sera étirée si vous définissez la largeur et la hauteur dans votre CSS. Si vous voulez manipuler dynamiquement la dimension du canevas, vous devez utiliser JavaScript comme ceci:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
15
Arindam Mojumder

Le navigateur utilise la largeur et la hauteur css, mais l'élément canvas est mis à l'échelle en fonction de la largeur et de la hauteur de la toile. En javascript, lisez la largeur et la hauteur css et définissez la largeur et la hauteur de la zone de travail.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
4
Russell Harkins

Shannimal correction

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
2
XaviGuardia

Si vous souhaitez un comportement dynamique basé sur, par exemple Requêtes de média CSS, n'utilisez pas les attributs de largeur et de hauteur de la toile. Utilisez les règles CSS et, avant d’obtenir le contexte de rendu du canevas, affectez aux attributs width et height les styles CSS width et height:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...
0
Manolo