Comentário: O HTML5 Canvas fornece uma API gráfica que pode ser implementada, através da qual você pode simplesmente realizar tradução, rotação, escala, etc. Deixe -me compartilhar com você a implementação específica de imagens de tradução, rotação, escala e referência. Amigos interessados podem se referir a ele. Espero que seja útil para você.
A tela HTML5 fornece uma API para implementar a tradução, rotação e escala de gráficos.Traduzir
As coordenadas traduzidas traduzem (x, y) significa traduzir as (0,0) coordenadas para (x, y) e as coordenadas originais (0,0) tornam -se (-x, -y)
A ilustração é a seguinte:
O ponto de coordenada de qualquer ponto de coordenada original P (OX, OY) após a tradução é p (ox-x, oy-y), onde o ponto (x, y) é a tradução
Coordenada de ponto Traduzir (x, y).
Demonstração de código:
// tradução é mover o ponto de partida para o centro e voltar para o canto superior esquerdo
função renderText (largura, altura, contexto) {
context.Translate (largura / 2, altura / 2); // As coordenadas do ponto central são (0, 0)
context.font = "18px Arial";
context.fillstyle = "azul";
Context.FillText ("Por favor, pressione <EC> para sair do jogo", 5,50);
context.Translate (-Width/2, -Height/2); // As coordenadas de recuperação de tradução (0,0) são o canto superior esquerdo
context.FillText ("Estou de volta ao topo", 5,50);
}
Escala
Escala (a, b) significa escalar o objeto ao longo do eixo XY para tamanhos*x, b*y, respectivamente. O efeito é mostrado na figura:
// Traduza o retângulo.
função drawath (context) {
context.Translate (200.200);
Context.Scale (2,2); // Escala duas vezes de tamanho da forma original
context.strokestyle = "verde";
context.BeginPath ();
context.moveto (0,40);
context.lineto (80,40);
context.lineto (40,80);
context.ClosePath ();
context.stroke ();
}
Girar
Gire o ângulo girar (Math.pi/8)
As coordenadas p (x, y) antes da rotação são p (rx, ry) após a rotação correspondente
Rx = x * cos (-angnAng)-y * sin (-Ange);
Ry = y * cos (-ANGAN) + x * sin (-Ange);
A rotação de 90 graus pode ser simplificada para:
Rx = y;
Ry = -x;
A direção de rotação padrão na tela é no sentido horário. O código de demonstração é o seguinte:
// new Point.x = x * cos (-ange) -y * sin (-angnan),
// new Point.y = y * cos (-angning) +x * sin (-angnAnge)
função renderRrotateText (context) {
context.font = "24px Arial";
context.fillstyle = "vermelho";
Context.FillText ("Estou aqui !!!", 5,50);
// girar -90 graus
// context.rotate (-math.pi/2);
// context.fillstyle = "azul";
// context.fillText ("Estou aqui !!!", -400,30);
// girar 90 graus
context.rotate (math.pi/2);
context.fillstyle = "azul";
context.FillText ("Estou aqui !!!", 350, -420);
console.log (math.sin (math.pi/2));
// rotae 90 graus e desenhe 10 linhas
context.fillstyle = "verde";
for (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);
}
}
A prática usual é usar rotação e tradução, traduzir primeiro as coordenadas (0,0) para a posição central.
traduzir (largura/2, altura/2) e depois girar (math.pi/2) para completar a rotação
O exemplo do código é o seguinte:
função SaveArDRESTORECONTEXT (Context) {
context.Save ();
context.Translate (200.200);
context.rotate (math.pi/2);
context.fillstyle = "preto";
Context.FillText ("Contexto 2D gira e traduz", 10, 10);
context.restore ();
Context.FillText ("Contexto 2D gira e traduz", 10, 10);
}
Todo o código JavaScript:
var tempContext = null; // contexto 2D variável global
window.onload = function () {
var Canvas = document.getElementById ("Target");
canvas.width = 450;
canvas.Height = 450;
if (! Canvas.getContext) {
console.log ("Canvas não suportadas. Instale um navegador compatível com HTML5.");
retornar;
}
// Obtenha o contexto 2D da tela e desenhe imagem
tempContext = Canvas.getContext ("2D");
// renderText (Canvas.width, Canvas.Height, tempContext);
SaveArdStoreContext (TempContext);
// drawPath (tempContext);
}
// tradução é mover o ponto de partida para o central e voltar ao canto superior esquerdo
função renderText (largura, altura, contexto) {
context.Translate (largura / 2, altura / 2);
context.font = "18px Arial";
context.fillstyle = "azul";
Context.FillText ("Por favor, pressione <EC> para sair do jogo", 5,50);
context.Translate (-Width/2, -Height/2);
context.FillText ("Estou de volta ao topo", 5,50);
}
// Traduza o retângulo.
função drawath (context) {
context.Translate (200, 200);
Context.Scale (2,2); // Escala duas vezes tamanho da 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 (-ange)-y * sin (-ange),
// new Point.y = y * cos (-angning) + x * sin (-angnAnge)
função renderRrotateText (context) {
context.font = "24px Arial";
context.fillstyle = "vermelho";
Context.FillText ("Estou aqui !!!", 5,50);
// girar -90 graus
// context.rotate (-math.pi/2);
// context.fillstyle = "azul";
// context.fillText ("Estou aqui !!!", -400,30);
// girar 90 graus
context.rotate (math.pi/2);
context.fillstyle = "azul";
context.FillText ("Estou aqui !!!", 350, -420);
console.log (math.sin (math.pi/2));
// rotae 90 graus e desenhe 10 linhas
context.fillstyle = "verde";
for (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);
}
}
função SaveArDRESTORECONTEXT (Context) {
context.Save ();
context.Translate (200.200);
context.rotate (math.pi/2);
context.fillstyle = "preto";
Context.FillText ("Contexto 2D gira e traduz", 10, 10);
context.restore ();
Context.FillText ("Contexto 2D gira e traduz", 10, 10);
}