HTML5 Canvas implementa a tradução/escala/exemplo de deom rotativo (com captura de tela)

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ê.

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);

}