Comentário: A largura e a altura padrão da tela são 300 e 150. Para evitar exceções, é melhor usar atributos de exibição para adicioná -los em vez de usar CSS para adicionar largura e altura. Abaixo está uma breve introdução às precauções para o uso de tela. Amigos interessados podem se referir a ele. Espero que seja útil para você.
1. Tutorial chinês de tela https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. A largura e a altura padrão da tela são 300 e 150. Para evitar exceções, é melhor usar atributos de exibição para adicioná -los em vez de usar CSS para adicionar largura e altura.
3. Instruções para adicionar navegadores que não suportam a tag de tela dentro da tag de tela
4. Você também pode determinar se o navegador suporta tela através do seguinte código JS.
var canvas = document.getElementById ('tutorial');
if (Canvas.getContext) {
var ctx = Canvas.getContext ('2D');
// Código de desenho aqui
} outro {
// Código Canvas-Unsupports aqui
}
5. A tela suporta apenas o desenho de uma forma básica, ou seja, retângulos, mas outras figuras podem ser desenhadas pelo caminho da tela.
0
7. A função do BELKPATH é usada para iniciar uma nova camada de caminho. Se não for adicionado, significa desenhar na camada de caminho original. Os efeitos dos dois códigos a seguir são completamente diferentes. O primeiro código mostra duas linhas vermelhas e o segundo código mostra uma linha preta e uma linha vermelha.
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.BeginPath ();
ctx.moveto (100,5,20,5);
ctx.lineto (200,5, 20,5);
ctx.stroke ();
ctx.moveto (100,5,40,5);
ctx.lineto (200,5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.BeginPath ();
ctx.moveto (100,5,20,5);
ctx.lineto (200,5, 20,5);
ctx.stroke ();
ctx.BeginPath ();
ctx.moveto (100,5,40,5);
ctx.lineto (200,5, 40,5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. Se o caminho não for necessário para fechar, o close -path poderá ser usado. Se o preenchimento for usado, o caminho será fechado automaticamente. Não há mais necessidade de usar o ClosePath.
9. Enquanto você tiver paciência suficiente, poderá usar a curva Bezier para desenhar qualquer figura.
10. Há um bug na curva quadrática sob o Firefox, para que a curva cúbica possa ser usada em vez da curva quadrática.
11. Imagens (como PNG, GIF, JPEG, etc.) podem ser introduzidas na tela, e outros elementos de tela também podem ser usados como fonte da imagem.
12. Abaixo está o código básico de desenho de imagem de tela, onde a imagem é a imagem ou o objeto de tela, x e y são suas coordenadas iniciais na tela de destino
drawimage (imagem, x, y)
O código a seguir representa a imagem em zoom, largura e altura representam o tamanho do zoom
drawimage (imagem, x, y, largura, altura)
O código a seguir representa uma imagem de recorte. O primeiro parâmetro é o mesmo que os outros, ambos são referências a uma imagem ou outra tela. The other 8 parameters respectively represent the starting x coordinates of the cut in the picture, the starting y coordinates of the cut in the picture, the width of the cut area, the height of the cut area, the x coordinates of the drawn position, the y coordinates of the drawn position, the width of the drawn figure, the height of the drawn figure, the size of the cut area can be different from the size of the drawn figure, and will be scaled to the Tamanho do desenho desenhado.
drawimage (imagem, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
13. O Strokestyle é usado para definir a cor do contorno gráfico, enquanto o FillStyle é usado para definir a cor de preenchimento. A cor pode ser um objeto de corda, gradiente ou objeto padrão que representa o valor da cor CSS. Por padrão, a linha e as cores de preenchimento são pretas (valor da cor CSS #000000).
14. A transparência da imagem pode ser expressa por globalalpha = valor de transparência ou valor de cor RGBA
15. A propriedade Linha de Linha define a espessura da linha desenhada atual. Para resolver o bug de largura da linha de 1px, +0,5 é usado para resolvê -lo.
16. A linha na linha mais à esquerda do atributo LineCap usa a bunda padrão. Pode -se notar que está nivelado com a linha auxiliar. No meio está o efeito da rodada, e um semicírculo com um raio de metade da largura da linha é adicionado no ponto final. À direita está o efeito do quadrado, com um quadrado com igual largura e uma altura de metade da largura da linha adicionada no ponto final.
17. Aqui também uso três polilinas como exemplo para definir diferentes valores de grade de linha. A parte superior é o efeito da redonda, as bordas e os cantos são arredondados e o raio do círculo é igual à largura da linha. O meio e o fundo são os efeitos de chanfro e miter, respectivamente. Quando o valor é miter, o segmento de linha se estende para fora da conexão até se cruzar em um ponto. O efeito de extensão é restringido pelo atributo miterlimit a ser introduzido abaixo
18. Os métodos salvar e restaurar são usados para salvar e restaurar o estado da tela e nenhum dos parâmetros. O estado da tela é um instantâneo de todos os estilos e deformações aplicadas à tela atual. O estado da tela é salvo na forma de uma pilha (pilha). Toda vez que o método de salvamento é chamado, o estado atual será empurrado para a pilha e salvo. Toda vez que o método de restauração é chamado, o estado salvo anterior aparece da pilha e todas as configurações são restauradas.
19. Transform (1, 0, 0, 1, 0, 0) Parâmetros representam escala horizontal, rotação horizontal (sentido horário), rotação vertical (no sentido anti -horário), escala vertical, deslocamento horizontal, deslocamento vertical
settransform (1, 0, 0, 1, 0, 0) significa redefinir a matriz de transformação anterior e depois construir uma nova matriz. Os parâmetros são os mesmos que acima
girar (ângulo), (um raio é igual a 1 radian, 2πr/r = radian, ou seja, 360 = 2π, ou seja, 1 = π/180)
20. A animação está realmente limpando constantemente a prancheta (ClearRect ()) e depois repintando -a