Canvas设置样式无效导致圆变成椭圆的问题研究剖析

秒速五厘米 2022-09-03 12:24 186阅读 0赞

Canvas设置样式无效导致圆变成椭圆的问题研究剖析，如下面代码段。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> /* 设置的是600*600 */ canvas{ width: 600px;height: 600px;} </style>
    </head>
    <body>    
        <canvas id="canvas" style="background: red;"></canvas>
        <script> //VSCode:恶心;插件不好搞; /** @type {HTMLCanvasElement}*/ let canvas=document.getElementById('canvas'); let ctx=canvas.getContext('2d'); //画圆操作 //利用2d对象进行绘制圆操作 //arc(x,y,半径，开始位置,结束角度,选转方向)false:表示顺指针;true:逆时针 console.log(canvas.width+","+canvas.height); ctx.arc(80,80,50,0,2*Math.PI,true); //绘制圆方法; ctx.fillStyle='blue'; ctx.fill(); </script>
    </body>
    </html>

使用浏览器输出测试效果如下所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70]ctx.arc(80,80,50,0,2*Math.PI,true); //绘制圆方法;改行代码我们设置的是绘制圆，但是显示的椭圆怎么回事嗯？  
这时候使用下面的语句进行测试一下，查看canvas的宽、高。  
![在这里插入图片描述][a83318096da743ac8ec0e589a778d966.png]我们发现canvas的宽和高是300 150.如下所示。  
![在这里插入图片描述][bbc8014e8d9b48d1add27e9d63309671.png]为什么回事这样呢？我们现在把canvas的样式设置给注释掉。再次运行代码，查看浏览器效果。发现即使我们没有给canvas设置宽和高，也会自动有宽 高位300 150的设置。  
![在这里插入图片描述][5ae6fe40bec8491e843e0e4f57029e46.png]这时候，刚才绘制的椭圆思路已经很清晰了，原因在于，canvas绘制之后，首先相当于作为了一张300*150的图片进行绘制，即上图。这时候把上图截图后放到画图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70 1]因为默认的canvas已经绘制完圆形图片，现在被作为了图片再进行样式设置。代码“canvas\{width: 600px;height: 600px;\} ”相当于对这个图片进行拉伸设置，那么我们对这个图片进行拉伸，拉伸后效果就是图1的效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70 2]这是canvas在使用过程中很容易掉的一个坑，所以，建议针对canvas的设置，直接在canvas的属性里面设置，不要在样式里面设置。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70]: /images/20220829/a8f383c47ade4d10936b9ac97834ff87.png
[a83318096da743ac8ec0e589a778d966.png]: /images/20220829/78668bdfe447438c93adc83824056b58.png
[bbc8014e8d9b48d1add27e9d63309671.png]: /images/20220829/48f262f8334743f4a524bc0e1c6de48c.png
[5ae6fe40bec8491e843e0e4f57029e46.png]: /images/20220829/b8d2520b729349b694c49f6554e090c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70 1]: /images/20220829/e838d226e2f244259811b1c643bf135e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70 2]: /images/20220829/3c5a07b2231141fb98ed276dc6e8fc7e.png