web-dev-qa-db-fra.com

Taille du canevas HTML5 via CSS par rapport aux attributs d'élément

Je ne comprends pas pourquoi les éléments de code suivants produisent des résultats différents, car css redimensionnerait la toile au fur et à mesure de son zoom, 

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

Contrairement à cette approche (qui fonctionne comme prévu):

<canvas id="canvas" width="800px" height="600px"></canvas>
csshtml5canvas
47
Joaquín L. Robles

L'explication est la suivante: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width comme vu dans un autre post, Merci!

Les dimensions intrinsèques de l'élément de canevas sont égales à la taille de l'espace de coordonnées, avec les nombres interprétés en pixels CSS. Cependant, l'élément peut être dimensionné de manière arbitraire par une feuille de style. Pendant le rendu, l'image est mise à l'échelle pour s'adapter à cette taille de présentation.

57
Joaquín L. Robles

Pensez à ce qui se passe si vous avez un fichier JPG qui est 32x32 (il a exactement 1024 pixels au total), mais spécifiez via CSS qu'il apparaisse comme width:800px; height:16px. La même chose s'applique à HTML Canvas:

  • Les attributs width et height de l'élément de zone de dessin déterminent lui-même le nombre de pixels que vous pouvez dessiner. Si vous ne spécifiez pas la hauteur et la largeur de l'élément canvas, alors conformément aux spécifications :
    "Par défaut, l'attribut width est 300 et l'attribut height, par défaut, 150."

  • Les propriétés CSS width et height contrôlent la taille d'affichage de l'élément à l'écran. Si les dimensions CSS ne sont pas définies, la taille intrinsèque de l'élément est utilisée pour la présentation.

Si vous spécifiez en CSS une taille différente des dimensions réelles du canevas, celle-ci doit être étirée et écrasée par le navigateur si nécessaire pour être affichée. Vous pouvez voir un exemple de ceci ici: http://jsfiddle.net/9bheb/5/

50
Phrogz

La meilleure façon de dimensionner votre toile est d’inclure dans une div et d’y appliquer un style de la taille souhaitée.

Voici le CSS

<style>
#divCanvas{
    width: 800px;
    height: 600px;
}
</style>

Voici le HTML

<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>
0
Diego Martins