HTML5 : Le cercle Canvas est ovale à cause de la largeur et de la hauteur.

Question

var qcanvas = $('#canvas');
var canvas = ctl_canvas[0];
var context = canvas.getContext('2d');
qcanvas.css('border', '1px solid black');
qcanvas.css('width', 400);
qcanvas.css('height', 75);

Lorsque j'utilise la méthode ci-dessus qcanvas.css('width', 400); et les css de hauteur respectifs, le réel La hauteur de la toile n'est pas celle que j'ai définie à l'aide des fonctions jquery. Quelqu'un sait-il comment je peux ne pas utiliser canvas.width = 400; et utiliser les fonctions propery jquery ?

Answer 1

En .width y .height d'un canevas sont indépendantes des propriétés CSS du même nom.

Les propriétés CSS définissent la taille visible, mais les propriétés de l'élément définissent l'espace de coordonnées.

Vous devrait définir directement les propriétés de largeur et de hauteur :

qcanvas.width = 400;
qcanvas.height = 75;

L'idéal est de définir les propriétés CSS de la même manière, ce qui est de toute façon la valeur par défaut, sauf modification spécifique.

Cela permet de s'assurer que vos systèmes de coordonnées sont cohérents. S'ils ne sont pas identiques, le navigateur appliquera une mise à l'échelle pour passer d'un système de coordonnées à l'autre, et vous devrez également appliquer votre propre mise à l'échelle pour convertir les coordonnées d'événements en coordonnées de pixels.

Answer 2

qcanvas.css('width', '400px');
qcanvas.css('height', '75px');

Vous devez spécifier px .