浅析canvas元素的html规格和css规格对元素视觉效果

日期:2021-02-22 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

遇到的难题:canvas元素形变失真的缘故

1个DOM元素存在3种规格:style规格,html规格,css规格。

应用canvas元素时,canvas元素默认设置宽高是300px * 150px。这里的默认设置规格是html规格。

以便更好地协助了解,以作画为例。画板是css规格或style规格,画布是html规格。

假如大家沒有显示信息特定canvas元素的html规格,而在css文档中特定了它的css规格。結果是10分让人疑惑。

比如大家在1个默认设置300px * 150px的画布上画了1个圆半径为50px的圆。

<html lang="zh">
<head>
    <meta charset="UTF⑻">
    <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。

从比照和想像中大家能够得出结果:

最初大家是在300 150的画布上绘图1个圆。绘图进行以后,大家又期待将画布的规格变为200 200,另外画布還是那块画布,不作拆换。

可行的方式是将画布进行拉伸。假定画布存在延展性,那末1块画布从300 150拉伸成200 200。画布上的圆的长半轴变为原先的1.33倍,短半轴变为0.68倍。此时圆当然便是椭圆了。

结果:

在应用canvas画图的情况下,以便防止无须要的不便,1定记得为canvas元素设置html规格的宽高。

总结

以上所述是网编给大伙儿详细介绍的浅析canvas元素的html规格和css规格对元素视觉效果的危害,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!