遇到的問題：html/11467.html">canvas元素變形失真的原因
一個DOM元素存在三種尺寸：style尺寸，html尺寸，css尺寸。
使用canvas元素時，canvas元素預設寬高是300px * 150px。這裡的預設尺寸是html尺寸。
為了更好地幫助理解，以作畫為例。畫板是css尺寸或style尺寸，畫布是html尺寸。
如果我們沒有顯示指定canvas元素的html尺寸，而在css檔案中指定了它的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>最後顯示的結果如下：
可以看出畫布的尺寸確實是200 * 200。但是圓已經變成了橢圓，圖形又發生了形變。這是為什麼呢？
如果移除css設定的尺寸又會怎麼樣呢？
可以看出此時圖形是正常的。畫布的尺寸確實是預設的300 * 150。
從對比以及想像中我們可以下結論：
起初我們是在300150的畫布上繪製一個圓。繪製完成之後，我們又希望將畫布的尺寸變成200200，同時畫布還是那塊畫布，不作更換。
可行的方法是將畫布經行拉伸。假設畫布存在彈性，那麼一塊畫布從300150拉伸成200200。畫布上的圓的長半軸變成原來的1.33倍，短半軸變成0.68倍。此時圓自然就是橢圓了。
結論：使用canvas畫圖的時候，為了避免不必要的麻煩，一定記得為canvas元素設定html尺寸的寬高。
總結以上所述是小編給大家介紹的淺析canvas元素的html尺寸和css尺寸對元素視覺的影響,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！