Comentário: Canvas significa tela. Embora todos chamem o Canvas de uma nova tag para o HTML5, parece que a tela pertence ao novo conhecimento do idioma HTML, de fato, o desenho de tela é feito através do JavaScript. Então, se você quiser aprender desenho de lona, deve ter uma fundação JavaScript
Embora todos chamem o Canvas de uma nova tag para o HTML5, parece que a tela pertence ao novo conhecimento do idioma HTML, de fato, o desenho de tela é feito através do JavaScript. Portanto, se você quiser aprender desenho de lona, deve ter uma fundação 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.
tela
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> Seu navegador não suporta Canvas </Canvas>
O texto na tag é para navegadores que não suportam tela, e os suportados nunca serão visíveis.
Nota: é necessário mencionar as características desta tela. Como o IMG, possui dois atributos nativos, a saber, largura e altura. Ao mesmo tempo, porque também é um elemento HTML, também pode usar CSS para definir a largura e a altura. No entanto, observe que 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 nativa 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.
Qual é a diferença entre eles?
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 nativa 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.
escovar
Agora que a tela já 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');
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á alguns 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.
coordenada
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, mas como todos aprenderam matemática, não vou falar muito sobre isso.
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...
outro
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.