Largeur de la toile et la hauteur en HTML5

Question

Est-il possible de fixer la largeur et la hauteur d’un élément canvas avec certaines variables ? Je m’exprime de tels éléments de la toile qui n’existent qu’en Html 5.

La manière habituelle est la suivante :

Answer 1

L' canvas DOM élément a .height et .width propriétés qui correspondent à l' height="…" et width="…" attributs. Fixés à des valeurs numériques dans le code JavaScript pour redimensionner la zone de travail. Par exemple:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

Notez que cette opération efface la toile, bien que vous devez suivre avec ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); gérer ces navigateurs qui ne sont pas entièrement claire de la toile. Vous aurez besoin de redessiner tout contenu que vous voulais affiché après le changement de taille.

A noter de plus que la hauteur et la largeur de la logique toile dimensions utilisées pour le dessin et sont différents de l' style.height et style.width CSS attributs. Si vous ne définissez pas les attributs CSS, la valeur intrinsèque de la taille de la toile sera utilisée comme la taille de l'affichage; si vous ne définissez les attributs CSS, et elles diffèrent de la toile dimensions, votre contenu sera mis à l'échelle dans le navigateur. Par exemple:

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

Voir cet exemple vivant d'une toile qui est agrandie en 4x.

Answer 2

Merci beaucoup ! Enfin, j’ai résolu le problème de pixels flous avec ce code :

``

plus le tour de la « demi-pixel » à unblur lignes.

Answer 3

Le code que vous avez fourni fixe les valeurs, la largeur à 300px et la hauteur à 300px. Vous pouvez modifier ces valeurs pour modifier la taille de votre toile.

Vous manquaient modifier dynamiquement la taille de votre toile ?