발생한 문제 : html/11467.html">캔버스 요소가 변형되고 왜곡되는 이유
DOM 요소에는 스타일 크기, HTML 크기, CSS 크기의 세 가지 크기가 있습니다.
캔버스 요소를 사용할 때 캔버스 요소의 기본 너비와 높이는 300px * 150px입니다. 여기서 기본 크기는 html 크기입니다.
이해를 돕기 위해 그림을 예로 들어보겠습니다. 대지는 CSS 크기 또는 스타일 크기이고 캔버스는 html 크기입니다.
지정된 캔버스 요소의 html 크기를 표시하지 않지만 CSS 파일에 해당 CSS 크기를 지정하는 경우. 결과는 매우 혼란스럽습니다.
예를 들어, 300px * 150px의 기본 캔버스에 반경이 50px인 원을 그립니다.
<html lang=zh><head> <meta charset=UTF-8> <title>캔버스 크기</title> <style> #canvas { width: 200px height: 200px } </style></head>< body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(canvas); const ctx = canvas.getContext(2d); ctx.StrokeStyle = #aaaaaa; ctx.arc(100, 100, 50, 0, 2 * ctx.Stroke(); closePath() };</script></body></html>표시되는 최종 결과는 다음과 같습니다.
실제로 캔버스 크기가 200*200임을 알 수 있습니다. 그러나 원은 타원으로 바뀌었고 모양도 변형되었습니다. 왜 이런가요?
CSS에서 설정한 크기를 제거하면 어떻게 되나요?
이때 그래프는 정상임을 알 수 있다. 캔버스의 크기는 실제로 기본 300*150입니다.
비교와 상상을 통해 우리는 다음과 같은 결론을 내릴 수 있습니다.
처음에는 300150이라는 캔버스에 원을 그렸습니다. 그리기가 완료된 후 캔버스의 크기를 200200으로 변경하고 싶습니다. 동시에 캔버스는 여전히 동일한 캔버스이므로 변경되지 않습니다.
작동하는 것은 캔버스를 늘리는 것입니다. 캔버스에 탄력성이 있다고 가정하면 캔버스는 300150에서 200200까지 늘어납니다. 캔버스 위 원의 장반축은 원래 크기의 1.33배, 단반축은 0.68배가 됩니다. 이 시점에서 원은 자연스럽게 타원이 됩니다.
결론적으로:캔버스를 사용하여 그림을 그릴 때 불필요한 문제를 피하기 위해 캔버스 요소의 HTML 크기의 너비와 높이를 설정하는 것을 기억해야 합니다.
요약이상은 에디터가 소개한 시각적 요소에 대한 캔버스 요소의 html 크기와 css 크기의 영향에 대한 간략한 분석입니다. 궁금한 점이 있으시면 메시지를 남겨주세요. 편집자가 제때에 답변해 드릴 것입니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!