Compartilhe experiência em habilidades de melhoria de desempenho de tela HTML5

Comentário: Este artigo explica como usar a tecnologia de cache para implementar o pré-desenho, reduzir o desenho repetido do conteúdo do Canvs e evitar o uso de coordenadas de ponto flutuante para melhorar o desempenho da tela HTML5. Amigos interessados ​​podem se referir a ele, esperando que seja útil para todos.

Muitas vezes, desenhamos e atualizamos sobre tela e sempre mantemos algum conteúdo inalterado para esses conteúdos.

O cache deve ser pré-desenhado, nem todas as atualizações.

O código é desenhado diretamente da seguinte maneira:

context.font = "24px Arial";

context.fillstyle = "azul";

Context.FillText ("Por favor, pressione <EC> para sair do jogo", 5,50);

requestanimationframe (render);

Usando técnicas de pré-pintura de cache:

Função renderizar (contexto) {

context.Drawimage (Mtext_Canvas, 0, 0);

requestanimationframe (render);

}

função drawText (context) {

mtext_canvas = document.createElement ("tela");

mtext_canvas.width = 450;

mtext_canvas.Height = 54;

var m_context = mtext_canvas.getContext ("2D");

m_context.font = "24px Arial";

m_context.fillstyle = "azul";

m_context.fillText ("Pressione <sc> para sair do jogo", 5,50);

}

Ao usar a tecnologia de desenho de cache do Canvas, lembre -se de cache o tamanho do objeto de tela menor que o tamanho real da tela. Tente reunir as operações de desenhar linhas retas e tente desenhá -las de uma só vez. Um código ruim é o seguinte:

for (var i = 0; i <points.length - 1; i ++) {

var p1 = pontos [i];

var p2 = pontos [i+1];

context.BeginPath ();

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

context.stroke ();

}

O código com maior desempenho após a modificação é o seguinte:

context.BeginPath ();

for (var i = 0; i <points.length - 1; i ++) {

var p1 = pontos [i];

var p2 = pontos [i+1];

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

}

context.stroke ();

Evite a comutação frequente de estados desnecessários de desenho de lona. Um exemplo de estilo de desenho com frequência é o seguinte:

var gap = 10;

for (var i = 0; i <10; i ++) {

context.fillstyle = (i % 2? "azul": "vermelho");

context.fillRect (0, i * gap, 400, gap);

}

Evite a troca frequente de estados de desenho, e o melhor código de desenho de desempenho é o seguinte:

// até

context.fillstyle = "vermelho";

for (var i = 0; i <5; i ++) {

context.fillRect (0, (i * 2) * gap, 400, gap);

}

// chance

context.fillstyle = "azul";

for (var i = 0; i <5; i ++) {

context.fillRect (0, (i * 2+1) * Gap, 400, Gap);

}

Ao desenhar, desenhe apenas as áreas que precisam ser atualizadas e evite desenho duplicado desnecessário e sobrecarga extra a qualquer momento. Para desenho de cenas complexas, a tecnologia de desenho hierárquica é usada, dividida em primeiro plano e desenho de fundo. Defina a camada de tela

O HTML é o seguinte:

<Canvas>

</canvas>

<Canvas>

<span> </lvas>

</Span>

Se não for necessário, tente evitar o desenho de efeitos como sombras, borrões, etc.

Evite usar coordenadas de ponto flutuante

Ao desenhar um gráfico, os números inteiros devem ser selecionados em vez de números de ponto flutuante. O motivo é que a tela suporta desenho de meio pixel para implementar um algoritmo de interpolação com base em locais decimais para obter efeito anti-aliasing das imagens de desenho. Se não for necessário, não selecione valores de ponto flutuante.

Limpe o conteúdo do desenho na tela:

context.clearrect (0, 0, Canvas.width, Canvas.Height)

Mas, de fato, há também um método semelhante ao hack em tela:

canvas.width = Canvas.width;

Também pode alcançar o efeito da limpeza do conteúdo na tela, mas pode não ser suportado em alguns navegadores.