Manual de referencia HTML

Lista completa de etiquetas HTML

Método scale() en HTML canvas

scale() es el método de Canvas 2D API agrega métodos de transformación de escala para unidades de canvas según las direcciones x horizontal y y vertical. Por defecto, en canvas, un unidad es en realidad un píxel. Por ejemplo, si utilizamos 0.5como factor de escala, el tamaño final del unidad será 0.5píxeles, y el tamaño de la forma se reducirá a la mitad. De manera similar, utilizaremos2.0 como factor de escala, aumentará el tamaño del unidad a dos píxeles. El tamaño de la forma se duplicará.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibuje un rectángulo，amplíe a 200%，luego dibuje un rectángulo nuevamente：

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método scale() de HTML canvas-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome y Safari admiten scale() Método.

Nota：Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método scale() amplía el dibujo actual a un tamaño mayor o menor.

Nota：Si amplía el dibujo, todos los dibujos posteriores también se ampliarán. La ubicación también se ampliará. Si scale(2,2)，entonces el dibujo se colocará a dos veces la distancia del esquina superior izquierda de la lienzo.

Sintaxis en JavaScript：	context.scale(scalewidth,scaleheight);

Valor del parámetro

Parámetro	Descripción
scalewidth	Ajuste el ancho actual del dibujo (1=100%,0.5=50%,2=200%，etc.).
scaleheight	Ajuste la altura actual del dibujo (1=100%,0.5=50%,2=200%，etc.).

Ejemplo en línea

Dibuje un rectángulo； amplíe a 200%，dibuje un rectángulo nuevamente； amplíe a 200%，dibuje un rectángulo nuevamente； amplíe a 200%，dibuje un rectángulo nuevamente：

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método scale() de HTML canvas-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Prueba para ver ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta