canvas 在css里设置高hight和宽width后，图像会变形；解决方法是绘制时画布时设置宽和高，就不会变形

本文链接：https://blog.youkuaiyun.com/weixin_41315600/article/details/125659449

canvas 在css里设置画布尺寸后，图像会变形，获得当前显示的屏幕尺寸，绘制时修改画布大小就不会变形

比较两者代码的不同
css里：wrap设置了高和宽。 normal没有

  #wrap {
            background-color: #CCE8EB;
            width: 37em;
            height: 3em;
        }
 #normal{
            background-color:blueviolet;
        }

javascript里：normal没有设置高和宽，注意不能加单位。 wrap没有

    var wrap = document.getElementById('wrap')
    var normal = document.getElementById('normal')
    normal.width="600";
    normal.height="60";

话不多说看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>canvas变形记</title>
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <style>
        #wrap {
            background-color: #CCE8EB;
            width: 37em;
            height: 3em;
        }
        #normal{
            background-color:blueviolet;
        }
    </style>
</head>

<body>

    <header>

    </header>

    <div><canvas id="wrap">我是变形的,canvas</canvas></div>
    <div><canvas id="normal">我是正常的,canvas</canvas></div>
</body>

</html>

<script type="text/javascript">

    var wrap = document.getElementById('wrap')
    var normal = document.getElementById('normal')
    normal.width="600";
    normal.height="60";
    
    readyRecoderTips(wrap,"我是变形的");
    readyRecoderTips(normal,"我是正常的");


    function readyRecoderTips(canvas,str) {
        if (canvas.getContext) {
            var van = canvas.getContext('2d');
            van.beginPath();
            van.fillStyle = "black";
            van.font = '2.4em sans-serif '; // 设置字体大小
            van.fillText(str, 0, canvas.height/1.3); // 绘制 "空心" 文字
            van.closePath();
        } else {
            alert('浏览器不支持canva功能');
        }

    }
</script>

代码效果图如下
在这里插入图片描述