Méthode scale()de l'élément HTML canvas

HTML canvas 参考手册Manuel de référence HTML canvas

Exemple

Dessinez un rectangle, redimensionnez-le à 200%, puis dessinez à nouveau le rectangle :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

Essayez-le vous-même »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode scale().

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode scale() met à l'échelle le dessin actuel à une taille supérieure ou inférieure.

Remarque :Si vous mettez un dessin à l'échelle, tous les dessins suivants seront également mis à l'échelle. Le positionnement sera aussi mis à l'échelle. Si vous utilisez scale(2,2), le dessin sera positionné deux fois plus loin du coin supérieur gauche du canvas.

Syntaxe JavaScript : context.scale(scalewidth,scaleheight);

Valeurs des paramètres

Paramètre Description
scalewidth Met à l'échelle la largeur du dessin actuel (1=100%, 0.5=50%, 2=200%, et ainsi de suite).
scaleheight Met à l'échelle la hauteur du dessin actuel (1=100%, 0.5=50%, 2=200%, et ainsi de suite).

实例

Plus d’exemples

Exemple

Dessinez un rectangle ; mettez à l'échelle 200 %, dessinez à nouveau le rectangle ; mettez à l'échelle 200 %, dessinez à nouveau le rectangle ; mettez à l'échelle 200 %, dessinez à nouveau le rectangle :

Votre navigateur ne prend pas en charge la balise canvas HTML.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

Essayez-le vous-même »

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions