El lienzo HTML5 implementa el ejemplo de traducción/escala/deom roto (con captura de pantalla)

Comentario: el lienzo HTML5 proporciona una API gráfica que se puede implementar, a través del cual simplemente puede realizar la traducción, la rotación, el escala, etc. Permítanme compartir con usted la implementación específica de traducción, rotación, escala e imágenes de referencia. Los amigos interesados ​​pueden referirse a él. Espero que te sea útil.

Traducir

Traducir coordenadas traducir (x, y) significa traducir las coordenadas (0,0) a (x, y), y las coordenadas originales (0,0) se convierten en (-x, -y)

La ilustración es la siguiente:

El punto de coordenada de cualquier punto de coordenada original P (Ox, Oy) después de la traducción es P (Ox-X, Oy-y), donde el punto (x, y) es la traducción

COORDINACIÓN DE PUNTOS Traducir (x, y).

Código de demostración:

// traducir es mover el punto de inicio a Centro y regresar a la esquina superior izquierda

función renderText (ancho, altura, contexto) {

context.Translate (ancho / 2, altura / 2); // Las coordenadas del punto central son (0, 0)

context.font = "18px arial";

context.fillstyle = "azul";

context.fillText ("Presione <c> para salir del juego", 5,50);

context.translate (-width/2, -height/2); // Las coordenadas de recuperación de traducción (0,0) son la esquina superior izquierda

context.fillText ("Estoy de vuelta a la cima", 5,50);

}

Escala

La escala (a, b) significa escalar el objeto a lo largo del eje xy a los tamaños de*x, b*y respectivamente. El efecto se muestra en la figura:

// Traduce el rectángulo.

function drawPath (context) {

context.Translate (200,200);

context.scale (2,2); // Escala dos veces tamaño de forma original

context.strokestyle = "verde";

context.beginPath ();

context.moveto (0,40);

context.lineto (80,40);

context.lineto (40,80);

context.ClosePath ();

context.stroke ();

}

Girar

Rotar el ángulo Rotado (Math.Pi/8)

Las coordenadas P (x, y) antes de la rotación son p (rx, ry) después de la rotación correspondiente son

Rx = x * cos (-ango)-y * sen (-angle);

Ry = y * cos (-ango) + x * sen (-angle);

La rotación de 90 grados se puede simplificar para:

Rx = y;

Ry = -x;

La dirección de rotación predeterminada en el lienzo es en sentido horario. El código de demostración es el siguiente:

// new Point.x = x * cos (-legle) -y * sin (-ango),

// new Point.y = y * cos (-angle) +x * sen (-leGle)

function rendErRotatExtext (context) {

context.font = "24px arial";

context.fillstyle = "rojo";

context.fillText ("¡Estoy aquí!", 5,50);

// girar -90 grados

// context.rotate (-math.pi/2);

// context.fillStyle = "Blue";

// context.fillText ("¡Estoy aquí!", -400,30);

// girar 90 grados

context.rotate (math.pi/2);

context.fillstyle = "azul";

context.fillText ("¡Estoy aquí!", 350, -420);

console.log (math.sin (math.pi/2));

// rotas de 90 grados y dibujar 10 líneas

context.fillstyle = "verde";

para (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

context.fillrect (Newx, Newy, 200, 6);

}

}

La práctica habitual es usar rotación y traducción, primero traducir las coordenadas (0,0) a la posición central.

Traducir (ancho/2, altura/2) y luego girar (math.pi/2) para completar la rotación

El ejemplo del código es el siguiente:

función saveanDrestorecontext (context) {

context.save ();

context.Translate (200,200);

context.rotate (math.pi/2);

context.fillstyle = "negro";

context.fillText ("Rotar y traducir el contexto 2D", 10, 10);

context.restore ();

context.fillText ("Rotar y traducir el contexto 2D", 10, 10);

}

Todo el código JavaScript:

var tempContext = null; // Contexto 2D variable global

window.onload = function () {

var canvas = document.getElementById ("objetivo");

Canvas.Width = 450;

Canvas.Height = 450;

if (! Canvas.getContext) {

console.log ("lienzo no es compatible. Instale un navegador compatible HTML5");

devolver;

}

// Obtener un contexto 2D de lienzo y dibujar imagen

tempContext = Canvas.getContext ("2d");

// rendertext (Canvas.Width, Canvas.Height, tempContext);

saveanDrestorEcontext (tempContext);

// DrawPath (tempContext);

}

// traducir es mover el punto de inicio a Centera y regresar a la esquina superior izquierda

función renderText (ancho, altura, contexto) {

context.Translate (ancho / 2, altura / 2);

context.font = "18px arial";

context.fillstyle = "azul";

context.fillText ("Presione <c> para salir del juego", 5,50);

context.translate (-width/2, -height/2);

context.fillText ("Estoy de vuelta a la cima", 5,50);

}

// Traduce el rectángulo.

function drawPath (context) {

context.Translate (200, 200);

context.scale (2,2); // Escala dos veces el tamaño de la forma original

context.strokestyle = "verde";

context.beginPath ();

context.moveto (0, 40);

context.lineto (80, 40);

context.lineto (40, 80);

context.ClosePath ();

context.stroke ();

}

// new Point.x = x * cos (-ango)-y * sin (-ango),

// new Point.y = y * cos (-angle) + x * sen (-leGle)

function rendErRotatExtext (context) {

context.font = "24px arial";

context.fillstyle = "rojo";

context.fillText ("¡Estoy aquí!", 5,50);

// girar -90 grados

// context.rotate (-math.pi/2);

// context.fillStyle = "Blue";

// context.fillText ("¡Estoy aquí!", -400,30);

// girar 90 grados

context.rotate (math.pi/2);

context.fillstyle = "azul";

context.fillText ("¡Estoy aquí!", 350, -420);

console.log (math.sin (math.pi/2));

// rotas de 90 grados y dibujar 10 líneas

context.fillstyle = "verde";

para (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

context.fillrect (Newx, Newy, 200, 6);

}

}

función saveanDrestorecontext (context) {

context.save ();

context.Translate (200,200);

context.rotate (math.pi/2);

context.fillstyle = "negro";

context.fillText ("Rotar y traducir el contexto 2D", 10, 10);

context.restore ();

context.fillText ("Rotar y traducir el contexto 2D", 10, 10);

}