Problemas encontrados: html/11467.html">A razão pela qual o elemento canvas está deformado e distorcido
Existem três tamanhos para um elemento DOM: tamanho do estilo, tamanho do HTML e tamanho do CSS.
Ao usar o elemento canvas, a largura e a altura padrão do elemento canvas são 300px * 150px. O tamanho padrão aqui é o tamanho HTML.
Para melhor ajudar na compreensão, tome a pintura como exemplo. A prancheta tem tamanho CSS ou tamanho de estilo e a tela tem tamanho HTML.
Se não exibirmos o tamanho HTML do elemento canvas especificado, mas especificarmos seu tamanho CSS no arquivo CSS. O resultado é muito confuso.
Por exemplo, desenhamos um círculo com raio de 50px em uma tela padrão de 300px * 150px.
<html lang=zh><head> <meta charset=UTF-8> <title>tamanho da tela</title> <style> #canvas { largura: 200px; altura: 200px; body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(canvas); const ctx = canvas.getContext(2d); ctx.strokeStyle = #aaaaaa; closePath(); };</script></body></html>Os resultados finais exibidos são os seguintes:
Pode-se ver que o tamanho da tela é de fato 200*200. Mas o círculo se transformou em uma elipse e a forma foi deformada. Por que isso acontece?
O que acontece se o tamanho definido pelo CSS for removido?
Pode-se observar que o gráfico está normal neste momento. O tamanho da tela é de fato o padrão 300*150.
Da comparação e da imaginação podemos tirar as seguintes conclusões:
Inicialmente desenhamos um círculo na tela 300150. Após a conclusão do desenho, queremos alterar o tamanho da tela para 200200. Ao mesmo tempo, a tela ainda é a mesma e não será alterada.
O que funciona é esticar a tela. Supondo que a tela tenha elasticidade, então uma tela se estende de 300150 a 200200. O semieixo maior do círculo na tela torna-se 1,33 vezes o tamanho original e o semieixo menor torna-se 0,68 vezes. Neste ponto, o círculo é naturalmente uma elipse.
para concluir:Ao usar o canvas para desenhar, para evitar problemas desnecessários, lembre-se de definir a largura e a altura do tamanho HTML do elemento canvas.
ResumirO texto acima é uma breve análise do impacto do tamanho do HTML e do tamanho do CSS do elemento canvas no elemento visual introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e. o editor responderá a você a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!