Explicação detalhada da diferença entre largura, altura e estilo na tela H5

Recentemente, encontrei um pequeno problema ao aprender as propriedades do canvas, que é a largura e a altura do canvas. Finalmente resolvi procurando informações relevantes, então vou compartilhar o processo de solução com vocês, não vou falar muito a seguir. dê uma olhada nos detalhes.

1. Ao usar o atributo largura e altura, a exibição não será esticada normalmente da seguinte forma:

 <canvas id=mycanvas width=300 height=300>O navegador não suporta Canvas, atualize ou use outro navegador! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); .stroke();</script>

O efeito de corrida é o seguinte, que é uma linha diagonal

2. Ao usar estilo, a imagem será esticada (deformada).

 <style> #mycanvas { largura: 150px; altura: 150px } </style>

Efeito de operação

A tela é uma prancheta e um pedaço de papel de desenho. A prancheta equivale a um recipiente. O desenho/trabalho é feito no papel de desenho.

A largura e a altura padrão da prancheta e do papel de desenho são 300*150. Quando a largura e a altura do papel de desenho e da prancheta são iguais, a imagem não será esticada. a prancheta for diferente, a imagem será esticada (deformada).

1. Os atributos de largura e altura definem a largura e a altura da prancheta e do papel de desenho.

Por exemplo: largura=300 altura=300 significa que a largura e a altura da prancheta são 300*300, e a largura e a altura do papel de desenho também são 300*300. A imagem diagonal 300*300 do trabalho não será. ser esticado.

2. Apenas a largura e a altura da prancheta são definidas no estilo. A largura e a altura do papel de desenho ainda são o valor padrão de 300*150.

(Tome a imagem acima como exemplo) Portanto, apenas parte da imagem diagonal 300*300 em que você está trabalhando é desenhada no papel de desenho, como segue:

Aliás, o papel de desenho não deixará a prancheta vazia, então o papel de desenho e a imagem devem ser esticados no mesmo tamanho da prancheta. Neste exemplo, a largura do papel de desenho e a largura da prancheta são ambas 30, e a altura é metade da prancheta, então você só precisa esticar a altura duas vezes, para que a imagem também seja esticada e afinada, o A direção X permanece inalterada e a direção Y é duplicada, então obtemos a imagem deformada.

Em relação às configurações de largura e altura do Canvas em HTML5

O elemento Canvas tem 300px de largura e 150px de altura por padrão. Para definir sua largura e altura, você pode usar o seguinte método (ele não será esticado):

Método um:

<largura da tela=500 altura=500></canvas>

Método 2: use a API HTML5 Canvas para funcionar bem

var canvas = document.getElementById('o id do canvas que você deseja operar');

tela.largura = 500;

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

#Para operar o id do canvas{

largura:1000px;

altura:1000px;

｝

Método 2: as operações usando a API HTML5 Canvas serão ampliadas

var canvas = document.getElementById('o id do canvas que você deseja operar');

tela.style.width = 1000px;

tela.estilo.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

O 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.