Toile est tendue lors de l’utilisation de CSS mais normal avec la « largeur » / propriétés « hauteur »

Question

J’ai 2 de toile, on utiliser HTML ancien et pour sa taille, l’autre utilise CSS

Affichage de Compteur1 comme il se doit, mais pas compteur2. Le contenu est dessiné en utilisant javascript sur une toile de 300 x 300.

Pourquoi y a-t-il une différence d’affichage ? Merci !

Capture d’écran :

Answer 1

Il semble que l' width et height attributs de déterminer la largeur ou la hauteur de la toile du système de coordonnées, alors que les propriétés CSS juste de déterminer la taille de la boîte dans laquelle il sera montré.

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

L' canvas élément possède deux attributs pour contrôler la taille de l'élément bitmap: width et height. Ces attributs, lorsque spécifié, doit avoir des valeurs qui sont valides entiers non négatifs. Les règles pour l'analyse des entiers non négatifs doivent être utilisées pour obtenir les 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. L' width d'attribut par défaut à 300, et l' height d'attribut par défaut 150.

Answer 2

Pour définir la largeur et la hauteur dont vous avez besoin, vous pouvez utiliser canvasObject.setAttribute ('width', '475') ;

Answer 3

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

Par exemple, considérez ceci:

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

avec:

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

Les deux ont eu la même chose, tiré sur eux, par rapport aux coordonnées internes de l'élément canvas. Mais dans la deuxième toile, le rectangle rouge est deux fois plus large car la toile dans son ensemble est en train de s'étendait sur une surface plus importante par les règles CSS:

http://jsfiddle.net/BYossarian/7CWCs/3/

Remarque: Si les règles CSS width et/ou height ne sont pas spécifiée, alors le navigateur va utiliser les attributs HTML pour la taille de l'élément, telles que 1 unité de ces valeurs est égale à 1px sur la page. Si ces attributs ne sont pas spécifiés, alors ils seront par défaut pour un width de 300 et height de 150.

Answer 4

CSS dimensionnera la toile si vous mentionnez la largeur et la hauteur. Si vous souhaitez manipuler dynamiquement la dimension de la toile vous devez utiliser le dessous