App下載

canvas中的html和css尺寸對元素視覺有哪些影響？影響總結(jié)！

猿友 2021-08-06 11:22:02 瀏覽數(shù) (1982)
反饋

今天小編分享一下我遇到的問題：canvas元素變形失真的原因。下面是有關(guān)于“canvas中的html和css尺寸對元素視覺有哪些影響？”這個問題的相關(guān)內(nèi)容分享！

例如我們在一個默認(rèn)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>

最后顯示的結(jié)果如下：

可以看出畫布的尺寸確實是200 * 200。但是圓已經(jīng)變成了橢圓，圖形發(fā)生了形變。這是為什么呢？

如果移除css設(shè)定的尺寸又會怎么樣呢？

可以看出此時圖形是正常的。畫布的尺寸確實是默認(rèn)的300 * 150。

從對比以及想象中我們可以得出結(jié)論：

起初我們是在300 150的畫布上繪制一個圓。繪制完成之后，我們又希望將畫布的尺寸變成200 200，同時畫布還是那塊畫布，不作更換。

可行的方法是將畫布經(jīng)行拉伸。假設(shè)畫布存在彈性，那么一塊畫布從300 150拉伸成200 200。畫布上的圓的長半軸變成原來的1.33倍，短半軸變成0.68倍。此時圓自然就是橢圓了。

結(jié)論：

在使用canvas畫圖的時候，為了避免不必要的麻煩，一定記得為canvas元素設(shè)定html尺寸的寬高。

總結(jié)

那么通過這邊文中我們大概就知道了有關(guān)于“canvas中的html和css尺寸對元素視覺有哪些影響？”這個問題的相關(guān)內(nèi)容分享！那么今天的文章分享就到這里了，對于html5有感興趣的小伙伴們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！ 

HTML5

0 人點贊