Comentário: O que é Canvas <Canvas> é um novo elemento HTML definido no HTML5. Esse elemento geralmente pode ser usado para desenhar gráficos, sintetizar imagens etc. nas páginas HTML através do JavaScript e também pode ser usado para fazer algumas animações. Claro, atualmente html5
O que é tela
<Canvas> é um novo elemento HTML definido no HTML5. Esse elemento geralmente pode ser usado para desenhar gráficos, sintetizar imagens etc. nas páginas HTML através do JavaScript e também pode ser usado para fazer algumas animações. Obviamente, a especificação HTML5 ainda está no estágio de rascunho e pode levar até 2010 para ser liberado oficialmente, mas agora muitos navegadores já apoiaram algumas especificações do HTML5. Atualmente, os navegadores que suportam elementos de tela incluem Firefox3+, Safari4, Chrome 2.0+, etc.; portanto, ao executar os exemplos nesta página, verifique se você está usando um dos navegadores acima.
Embora eu tenha tido muitos tutoriais sobre tela em Mozilla, decidi gravar meu processo de aprendizado. Se você acha que eu não entendo o suficiente, pode encontrar um link para o tutorial de tela no site da Mozilla nos materiais de referência.
Além disso, alguns exemplos interessantes de tela podem ser encontrados aqui.
Comece com tela
Usar tela é simples. Assim como o uso de outros elementos HTML, você só precisa adicionar uma tag <lVAs> à página:
<lVAs> </canvas>
Obviamente, essa é apenas uma criação simples de um objeto de tela e não executa nenhuma operação nele. Neste momento, o elemento de tela não parece diferente do elemento div, e nada pode ser visto na página :)
Além disso, o tamanho do elemento de tela pode ser especificado pelos atributos de largura e altura, que é um pouco semelhante ao elemento IMG.
Core: Contexto da Canvas
Como mencionado anteriormente, você pode operar objetos de lona através do JavaScript para desenhar gráficos, imagens de síntese etc. Essas operações não são realizadas através do objeto de tela, mas são realizadas através de um método do objeto de tela para obter o Context para obter o contexto de operação do Canvas. Em outras palavras, no processo de usar o objeto Canvas, lidamos com o contexto do objeto Canvas e o próprio objeto de tela pode ser usado para obter informações como o tamanho do objeto de tela.
É muito simples obter o contexto do objeto de tela. Basta chamar o método getContext do elemento Canvas. Ao ligar, você precisa passar um parâmetro de tipo de contexto. O único valor de tipo que pode ser usado e pode ser usado é 2D:
O constrangimento do Firefox3.0.x
Embora o Firefox3.0.x suporta elementos de tela, ele não está totalmente implementado de acordo com a especificação. Os métodos FillText e MeasuTeText na especificação são substituídos por vários métodos específicos do Firefox no Firefox3.0.x. Portanto, ao usar tela no Firefox3.0.x, você precisa primeiro corrigir as diferenças entre esses métodos em diferentes navegadores.
O código a seguir é retirado do projeto Mozillabespin, que corrige a inconsistência entre o objeto de contexto da tela no Firefox3.0.x e a especificação HTML5:
NOTA: Até a Opera 9.5, a Opera não suporta o texto de preenchimento do objeto Canvas e seus métodos e propriedades relacionados na especificação HTML5.
Olá, tela!
Depois de algum entendimento preliminar da tela, começamos a escrever nosso primeiro programa de tela, outra filial do famoso Helloworld Hello, Canvas:
Execute o exemplo, a área em que o objeto de tela está localizado mostra Hello, World!, Que é exatamente a função do CTX.FILLTEXT (Hello, World!, 20,20); no código.
FillText e propriedades relacionadas
O método FillText é usado para exibir o texto em tela. Ele pode aceitar quatro parâmetros, o último é opcional:
VoidFillText (IndomstringText, Infloatx, Infloaty, [Opcional] InfloatmaxWidth);
Onde a maxwidth representa a largura máxima ao exibir texto, o que pode impedir que o texto transborde. No entanto, nos meus testes, descobri que a maxwidth não é eficaz ao especificar a maxwidth em Firefox e Chomre.
Antes de usar o método FillText, você pode ajustar a fonte do texto definindo a propriedade Font do contexto. No exemplo acima, usei o 20Ptarial como fonte do texto. Você pode definir valores diferentes para ver o efeito específico.
Terminar
Isso é tudo por enquanto. Vou escrever esta série enquanto lê as especificações :)
Referências
1.
2.
3. Chinês Canvastutorial, Mozilla
4. CANVASTUTORIAL INGLÊS, Mozilla
5.CanVassupportinopera, ópera