Recentemente, por necessidades de trabalho, aprendi sobre a tag Canvas em HTML.
Canvas é um novo componente do HTML5. É como uma cortina na qual vários gráficos, animações, etc. podem ser desenhados usando JavaScript.
Na era anterior ao Canvas, o desenho só podia ser feito com a ajuda de plug-ins Flash, e as páginas precisavam usar JavaScript e Flash para interagir. Com o Canvas, não precisamos mais do Flash e podemos usar JavaScript diretamente para concluir o desenho.
O problema começou quando eu mesmo escrevi um hello world depois de assistir ao tutorial. Veja o código abaixo:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=largura: 200px;altura: 200px; borda:1px preto sólido;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); 0);ctx.lineTo(200, 200);
O significado do código acima é desenhar uma linha reta em uma tela com largura e altura de 200px cada. O ponto inicial da linha reta é (0,0) e o ponto final é (200.200);
Porém, a imagem desenhada pelo navegador é:
Dê uma olhada nesta foto ~ Por que é tão inclinado? Não deveria ser~ Deveria ser uma linha diagonal~~
Posteriormente, após pesquisar informações, descobri que ao definir a largura e a altura da tag canvas, existem os seguintes métodos e consequências:
A largura padrão do elemento Canvas é 300px e a altura é 150px. Para definir sua largura e altura, você pode usar o seguinte método:
Método um:
1 <largura da tela=500 altura=500$amp;>amp;$lt;/canvas>
Método 2: usar a operação da API HTML5 Canvas
1 var canvas = document.getElementById('id do canvas a ser operado');
2 tela.largura = 500;
3 tela.largura = 500;
Se a largura e a altura forem definidas pelo método a seguir, o elemento Canvas será esticado do tamanho original até a largura e altura definidas:
Método 1: Usar CSS irá esticar o
1 #Para operar o ID da tela{
2 largura: 1000px;
3 altura:1000px;
4｝
Também inclui style= em estilos embutidos. Ou seja, no exemplo acima também ocorrerá alongamento.
Método 2: as operações usando a API HTML5 Canvas serão ampliadas
1 var canvas = document.getElementById('id do canvas a ser operado');
2 tela.style.width = 1000px;
3 tela.style.height = 1000px;
Método 3: Usar $(#id).width(500) do jquery será esticado;
Outros: A largura e a altura da tela não podem ser expressas como porcentagens. canvas exibirá a porcentagem como um valor numérico
Portanto, pelas informações acima, podemos saber que o motivo é que o código do meu exemplo acima irá esticar a largura e a altura da tela, tornando a imagem inconsistente com as expectativas.
Agora reescrevi um exemplo de código para definir corretamente a largura e a altura da tela:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Seu navegador não suporta o elemento canvas.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.stroke();</script></body></html>
resultado:
Terminar.
ResumirO texto acima é todo o conteúdo deste artigo. Espero que o conteúdo deste artigo tenha certo valor de referência para o estudo ou trabalho de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para comunicação. Rede.