Comentário: Todo mundo sabe que nem todos os navegadores atualmente suportam o HTML5. Mesmo os navegadores que suportam o HTML5 podem não suportar todos os novos recursos do HTML5. Recomenda -se que você use o Firefox (navegador favorito dos desenvolvedores) ou Chrome. Todos os meus exemplos são desenvolvidos com base no Firefox.
A partir de hoje, iniciaremos uma série de cursos na tela HTML5. Esta série é o meu resumo depois de ler "HTML5 Canvas: Interatividade e Animação Nativa para a Web". Amigos interessados podem baixar livros ingleses originais para ler. Este livro nos mostra as poderosas funções da tela, introduzindo o desenvolvimento da tela. Eu acho que é muito bom. Aprendi muito conhecimento sobre tela lendo este livro. De fato, não há muitas APIs na própria tela. A chave é aprender e usá -los ativamente e aprender a criar resultados incríveis para a combinação de APIs. E este livro é a sua melhor escolha para aprender a tela. É uma pena que ainda não tenha uma versão chinesa. Amigos com inglês pobre só pode esperar.Como todos sabemos, nem todos os navegadores suportam atualmente o HTML5, e até os navegadores que suportam o HTML5 podem não suportar necessariamente todos os novos recursos do HTML5. Portanto, todos devem escolher um navegador relativamente novo como seu ambiente de depuração. Recomenda -se que você use o Firefox (navegador favorito do desenvolvedor) ou Chrome. Todos os meus exemplos são desenvolvidos com base no Firefox.
Não vou apresentar o conhecimento básico relacionado ao HTML5 aqui. Existem muitos tutoriais sobre o HTML5 na internet, para que eu possa aprender sozinho. Para aprender HTML5, você precisa ter uma base melhor em JavaScript. Você pode ir ao blog do tio Tom para aprender:. De fato, esta série de cursos é bastante difícil. Se você estudar mais de 50 artigos bem, deve ser considerado um especialista em JS.
Agora começamos oficialmente nosso curso de tela, o primeiro exemplo: Hello Canvas.
Primeiro, você precisa adicionar a tag de tela no corpo, como segue:
<Canvas>
Seu navegador não suporta a tela HTML5.
</canvas>
A parte de texto em tela será exibida quando o navegador não suportar o objeto Canvas.
A tag de tela é definida. Quando precisamos operá -lo através do JS, ele pode ser implementado através do getElementById.
var theCanvas = document.getElementById (CanvasOne); Agora estamos acostumados a usar o jQuery para desenvolver tarefas, então como obter o objeto de tela usando jQuery?
var canvas = $ ('#Canvasone'). Get (0); ou var canvas = $ ('#Canvasone') [0]; Eu não sei que recebe (0) e [0] não o possui. Se você não usar o método get () ou o subscrito [], seu código JS não poderá operar a tela normalmente. Porque $ ('#Canvasone') recebe um objeto jQuery e o que realmente queremos operar é um objeto HTML DOM. Há um problema em que o objeto jQuery é convertido em objeto DOM, e essa conversão é concluída através do get () ou subscrito. Se você precisar converter um objeto DOM em um objeto jQuery, poderá usar o método $ () para implementá -lo. Meu amigo que não está claro sobre isso tem o único que vai para o Baidu sozinho, então não vou entrar em profundidade aqui.
Para garantir a robustez do código, precisamos determinar se o seu navegador suporta objetos de tela, que podem ser implementados através do código a seguir.
if (! thecanvas ||! thecanvas.getContext) {
retornar;
}
No entanto, é recomendável que você use a biblioteca Modernizr.js para concluir este trabalho. Esta é uma biblioteca HTML5 JS muito passiva e fornece muitos métodos úteis.
função canvassupport () {
retornar modernizr.canvas;
}
O Canvas suporta a renderização 2D e é implementado através do seguinte código:
var context = thecanvas.getContext (2d);
Em seguida, podemos desenhar a imagem na tela através do objeto de contexto.
// Defina a cor da área
context.fillstyle = "#ffffa";
// desenha a área
context.fillRect (0, 0, 500, 300);
// Defina a fonte
context.font = "20px _sans";
// Defina o alinhamento vertical
context.TextBaseline = "Top";
// Desenhe texto
Context.FillText ("Hello World!", 195, 80);
// Defina a cor da borda
context.strokestyle = "#000000";
// Desenhe borda
context.Strokereect (5, 5, 490, 290);
O desenho da figura é descrito abaixo. Devido ao download assíncrono da imagem, para garantir que, ao desenhar uma imagem com tela, a imagem tenha sido baixada, usamos o seguinte método:
var helloworldImage = new Image ();
helloworldImage.src = "helloworld.gif";
helloworldImage.onload = function () {
context.Drawimage (HelloworldImage, 160, 130);
}
Quando a imagem for concluída, o evento Onload será acionado e a imagem será desenhada usando o objeto de contexto.
Todos baixam a demonstração para ver o código completo. O endereço de download de demonstração: html5canvas.helloworld.zip