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