Tutorial de desenho de tela HTML5 (1) - Conhecimento básico do desenho

Embora todos chamem o Canvas de uma nova tag para html5/"> html5, parece que a tela pertence ao novo conhecimento da linguagem HTML, mas, de fato, o desenho de tela é feito através de JavaScript. Portanto, se você quiser aprender desenho de Canvas, você deve ter uma base Javascript.

Além disso, ao desenhar fotos, sempre existem alguns termos e pontos de conhecimento nas imagens; portanto, se você tiver experiência em fazer fotos ou arte, será mais fácil aprender a tela.

Canvas significa tela. A tela no HTML5 é realmente muito semelhante à tela na vida real. Então, vê -lo como uma tela tangível pode acelerar o entendimento.

Para desenhar com tela, antes de tudo, você precisa ter uma tela. Se você não tiver uma tela em sua estante, pode comprar um rolo e colocá -lo. É claro que não precisamos gastar dinheiro na página da web, basta escrever uma tela, semelhante a:

<Canvas id = "cvs"> Seu navegador não suporta Canvas </lvas>

O texto na tag é para navegadores que não suportam tela, e os suportados nunca serão visíveis.

É necessário mencionar as características dessa tela. Possui dois atributos nativos, a saber, largura e altura. Ao mesmo tempo, porque também é um elemento HTML, ele também pode usar CSS para definir largura e altura. No entanto, certifique -se de prestar atenção: sua própria largura e altura são diferentes da largura e da altura definidas através do CSS!

Usamos o JS para alterar a largura e a altura da tela, assim:

Canvas.width = 400

canvas.Height = 300

Mas o uso de JS para alterar a largura e a altura da tela operando CSS, é assim:

Canvas.style.width = '400px'

Canvas.style.Height = '300px'

Pode -se observar que a diferença gramatical é muito óbvia. De fato, a diferença é mais óbvia.

Por exemplo, para uma tela 1000 de largura, você desenha uma linha vertical no lado esquerdo da tela, 100 pixels de largura. Neste momento, você define a largura da própria tela como 500, o que equivale a clicar na metade direita da tela, mas neste momento a largura da linha vertical ainda é 100.

Mas se você usar o CSS para alterar a largura da tela para 500, é equivalente a extrudir a tela de 1000 para 500, portanto, a largura da linha vertical se tornará 50.

(Esta é apenas uma situação teórica. Ao definir a largura da tela, ele limpará o conteúdo desenhado.)

A própria largura e altura da tela são atributos da própria tela, e a largura e a altura dadas pelo CSS podem ser consideradas como escala. Se você escalar muito casualmente, os gráficos na tela podem se tornar irreconhecíveis para você.

Portanto, há uma sugestão: a menos que em circunstâncias especiais, não use CSS para definir a largura e a altura da tela.

A tela tem, e agora o retiramos:

var cvs = document.getElementById ('cvs');

Olha, é exatamente o mesmo que obter outros elementos.

Agora que a tela está disponível, quero desviar -o, é claro que também preciso de uma caneta. O método de obter uma caneta é o seguinte:

var ctx = cvs.getContext ('2d'); Onde o método getContext é usado para segurar uma caneta, mas há outro parâmetro aqui: 2D. O que isto significa? Isso pode ser considerado como um tipo de pincel.

Como há 2D, então haverá 3D? Provavelmente haverá no futuro, mas não agora. Então, vamos usar esta caneta 2D primeiro.

Então, podemos colocar mais algumas canetas de sobra? A resposta é não.

Quero fazer uma pergunta: quantas canetas você usa ao mesmo tempo ao desenhar fotos? Eu acredito que 99,9% das pessoas só podem usar uma. Embora alguns mestres de artes marciais como Xiaolongnu possam desenhar com as duas mãos ao mesmo tempo, isso é muito irrealista para as pessoas comuns, certo?

Então agora você pode se sentir aliviado porque a tag de tela HTML5 também suporta apenas usando uma caneta ao mesmo tempo!

Alguns estudantes familiarizados com o JS podem querer ser inteligentes: eu uso o método de obter o pincel da maneira anterior para obter mais algumas canetas, não seria suficiente? !

por exemplo:

var con = cvs.getContext ('2d');

var ctx = cvs.getContext ('2d');

Hahahaha, parece ter sucesso. Eu pensei assim antes do teste, mas, na verdade, isso é apenas uma ilusão!

Porque descobri que mergulhei uma das canetas em tinta vermelha e a outra caneta também foi mergulhada automaticamente em tinta vermelha! Porque as duas canetas são uma! Porra.

Se você precisar desenhar cores diferentes, o caminho é continuar mergulhando essa caneta exclusiva em uma nova cor.

Na verdade, isso não é uma vantagem, é um defeito, você o experimentará no futuro.

O mundo 2D é um avião. Para determinar um ponto em um plano, são necessários dois valores, coordenadas x e coordenadas y. Este é um conceito básico muito importante.

A origem da tela é o canto superior esquerdo, o mesmo que o flash. Mas o que é tão irritante é que a origem na matemática é o canto inferior esquerdo. Esse...

Primeiro de tudo, você precisa saber que tipo de alterações coordenadas desenharão quais linhas? Por exemplo, se a coordenada X se tornar maior e a coordenada Y permanecer inalterada, uma linha horizontal poderá ser desenhada; Se a coordenada Y altera, mas a coordenada X permanecer inalterada, uma linha vertical poderá ser desenhada.

Obviamente, também existem linhas diagonais, linhas diagonais esquerdas e linhas diagonais direito. Se você pode comparar as fotos, a maioria das pessoas pode entendê -las de uma só vez; É mais deprimente desenhar com código, e você só pode pensar nisso através do pensamento lógico.

Se você se sentir confuso sobre as linhas agora, não se preocupe, você as entenderá naturalmente durante o processo de aprendizado.

O Canvas possui um recurso diferente da tela real, que é transparente por padrão e não tem cor de fundo. Isso é muito importante na maioria das vezes.