Manuel de référence HTML

Tous les balises HTML

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

scale() est une méthode de Canvas 2L'API D selon les directions horizontales x et verticales y, ajoute une méthode de transformation de zoom aux unités du canvas. Par défaut, dans un canvas, une unité est en fait un pixel. Par exemple, si nous utilisons 0.5comme facteur de zoom, l'unité finale deviendra 0.5pixels, et la taille de la forme deviendra la moitié de l'original. De la même manière, nous allons2.0 comme facteur de zoom, le dimensionnement unitaire deviendra deux pixels. La taille de la forme deviendra deux fois plus grande.

Référence du manuel HTML canvas

Exemple en ligne

Dessinez un rectangle, agrandissez jusqu'à 200%, puis redessinez un rectangle :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode scale() de HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　balise canvas.
</canvas>
<script>
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);
</script>　
</body>
</html>

Voyons un test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge scale() Méthode.

Attention :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode scale() agrandit ou réduit le dessin actuel.

Attention :Si vous agrandissez le dessin, tous les dessins suivants seront également agrandis. La position sera également agrandie. Si vous scale(2,2) alors le dessin sera positionné à deux fois plus loin du coin supérieur gauche du canevas.

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

Valeur du paramètre

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

Exemple en ligne

Dessinez un rectangle ; agrandissez jusqu'à 200%, redessinez un rectangle ; agrandissez jusqu'à 200%, redessinez un rectangle ; agrandissez jusqu'à 200%, redessinez un rectangle :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode scale() de HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　balise canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Voyons un test ‹/›

Référence du manuel HTML canvas

HTML: <template> balise