La toile est étirée en utilisant CSS mais normal avec les propriétés "largeur" / "hauteur"

j'ai 2 toiles, l'Une utilise les attributs HTML width et height pour le dimensionner, 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 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

166
demandé sur Martijn Pieters 2010-04-07 00:45:34
la source

7 ответов

il semble que les attributs width et height déterminent la largeur ou la hauteur du système de coordonnées de la toile, tandis que les propriétés CSS déterminent simplement la taille de la boîte dans laquelle elle sera affichée.

ceci est expliqué à http://www.whatwg.org/html#attr-canvas-width (needs JS) ou http://www.whatwg.org/c#attr-canvas-width (mangera probablement votre ordinateur):

l'élément canvas possède 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 valides non négatifs . Les règles pour l'analyse des 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, la valeur par défaut doit être utilisé à la place. Le width attribut par défaut à 300, et l'attribut height par défaut à 150.

185
répondu SamB 2014-08-06 09:46:32
la source

pour définir le width et height vous avez besoin, vous pouvez utiliser

canvasObject.setAttribute('width', '475');
34
répondu fermar 2014-10-09 22:26:44
la source

pour <canvas> éléments, les règles CSS pour width et height fixent 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 fixent la taille du système de coordonnées ou "grille" que l'API canvas utilisera.

par exemple, considérez 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 la même chose dessinée par rapport aux coordonnées internes de l'élément de toile. Mais dans la deuxième toile, le rectangle rouge sera deux fois plus large parce que la toile dans son ensemble est étirée sur une plus grande surface par les règles CSS.

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

19
répondu BYossarian 2016-02-12 07:12:52
la source

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

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
15
répondu Arindam Mojumder 2016-08-24 19:45:57
la source

le navigateur utilise la largeur et la hauteur css, mais l'échelle de l'élément canvas est basée sur la largeur et la hauteur de la toile. En javascript, lisez la largeur et la hauteur css et réglez la largeur et la hauteur de la toile à cela.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
3
répondu Russell Harkins 2014-11-19 01:19:13
la source

Shannimal correction

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
2
répondu XaviGuardia 2015-11-21 14:47:09
la source

si vous voulez un comportement dynamique basé sur, par exemple, les requêtes css media, n'utilisez pas les attributs Canvas width et height. Utilisez les règles CSS et ensuite, avant d'obtenir le contexte de rendu canvas, assignez 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
répondu Manolo 2016-01-25 22:43:17
la source

Autres questions sur