- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

tea_year 发表于 2021/12/23 00:37:16 2021/12/23

【摘要】 Canvas设置样式无效导致圆变成椭圆的问题研究剖析，如下面代码段。 <!DOCTYPE html> <html lang="en"> <head> <...

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>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29

使用浏览器输出测试效果如下所示。
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的属性里面设置，不要在样式里面设置。