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.
El lienzo HTML5 proporciona una API para implementar la traducción, rotación y escala de gráficos.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);
}