溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“canvas中的html和css尺寸對元素視覺的影響是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“canvas中的html和css尺寸對元素視覺的影響是什么”吧！
例如我們在一個默認300px * 150px的畫布上畫了一個圓半徑為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>
可以看出此時圖形是正常的。畫布的尺寸確實是默認的300 * 150。
從對比以及想象中我們可以得出結論：
起初我們是在300 150的畫布上繪制一個圓。繪制完成之后，我們又希望將畫布的尺寸變成200 200，同時畫布還是那塊畫布，不作更換。
可行的方法是將畫布經行拉伸。假設畫布存在彈性，那么一塊畫布從300 150拉伸成200 200。畫布上的圓的長半軸變成原來的1.33倍，短半軸變成0.68倍。此時圓自然就是橢圓了。
感謝各位的閱讀，以上就是“canvas中的html和css尺寸對元素視覺的影響是什么”的內容了，經過本文的學習后，相信大家對canvas中的html和css尺寸對元素視覺的影響是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
