浅析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规格对元素视觉效果的危害,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：那么多营销推广方式，为什么挑选手机微信h5手机 返回下一篇：没有了