Latest web development tutorials

setTransform lienzo HTML método ()

HTML Manual de Referencia de la lona HTML Manual de Referencia de la lona

Ejemplos

Dibujar un rectángulo por setTransform () restablecer y crear una nueva matriz de transformación, dibujar un rectángulo de nuevo, reiniciar y crear una nueva matriz de transformación, y luego dibujar un rectángulo de nuevo. Tenga en cuenta que cada vez que se llama a setTransform (), que restablece antes de una matriz de transformación y luego construir una nueva matriz, en el siguiente ejemplo, el rectángulo rojo no se muestra porque está por debajo del rectángulo azul:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

Trate »

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari setTransform apoyo ().

Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.

Definición y Uso

Cada objeto en el lienzo tiene una matriz de transformación actual.

setTransform método () a la matriz de transformación actual Restablece la matriz, y luego ejecuta con los mismos parámetros de la Transformación () .

En otras palabras, setTransform () le permite hacer zoom, rotar, mover e inclinar el entorno actual.

Nota: Este método de conversión sólo afectará setTransform () se llama después del sorteo.

la sintaxis de JavaScript: contexto .setTransform (a, b, c, d, e, f);

parámetro Valor

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTML Manual de Referencia de la lona HTML Manual de Referencia de la lona