今天小編分享一下我遇到的問(wèn)題：canvas元素變形失真的原因。下面是有關(guān)于“canvas中的html和css尺寸對(duì)元素視覺(jué)有哪些影響？”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享！
例如我們?cè)谝粋€(gè)默認(rèn)300px * 150px的畫(huà)布上畫(huà)了一個(gè)圓半徑為50px的圓。
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas尺寸</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.beginPath();
ctx.strokeStyle = "#aaaaaa";
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
};
</script>
</body>
</html>最后顯示的結(jié)果如下：
可以看出畫(huà)布的尺寸確實(shí)是200 * 200。但是圓已經(jīng)變成了橢圓，圖形發(fā)生了形變。這是為什么呢？
如果移除css設(shè)定的尺寸又會(huì)怎么樣呢？
可以看出此時(shí)圖形是正常的。畫(huà)布的尺寸確實(shí)是默認(rèn)的300 * 150。
從對(duì)比以及想象中我們可以得出結(jié)論：
起初我們是在300 150的畫(huà)布上繪制一個(gè)圓。繪制完成之后，我們又希望將畫(huà)布的尺寸變成200 200，同時(shí)畫(huà)布還是那塊畫(huà)布，不作更換。
可行的方法是將畫(huà)布經(jīng)行拉伸。假設(shè)畫(huà)布存在彈性，那么一塊畫(huà)布從300 150拉伸成200 200。畫(huà)布上的圓的長(zhǎng)半軸變成原來(lái)的1.33倍，短半軸變成0.68倍。此時(shí)圓自然就是橢圓了。
結(jié)論：
在使用canvas畫(huà)圖的時(shí)候，為了避免不必要的麻煩，一定記得為canvas元素設(shè)定html尺寸的寬高。
總結(jié)
那么通過(guò)這邊文中我們大概就知道了有關(guān)于“canvas中的html和css尺寸對(duì)元素視覺(jué)有哪些影響？”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享！那么今天的文章分享就到這里了，對(duì)于html5有感興趣的小伙伴們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
