关于使用canvas画图时，图片被拉伸的问题

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客https://github.com/BokFang

canvas元素可以用来画2D图形，我们通过写js来完成任务。
首先，我们在html文件中写入：

<canvas id="canvas" ></canvas>

然后在css中给canvas一个背景颜色：

#canvas{
  background: #04f7ff;
}

此时浏览器中是这样的：

image.png

正如我们所看到的，canvas的默认值是宽300高150。我想把画布变为正方形，所以在css中加入width:300px;height:300px。接着我们在上面画圆。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

image.png

却发现圆被拉伸为椭圆了。

原因：

canvas是由一张画板和一张画纸铺成的,画板相当于一个容器，我们在画纸上作画。当画纸与画板宽高不相等时，图形就会被拉伸。

解决方法：

1.在html标签中设置canvas属性：

<canvas id="canvas" width = 300 height = 300></canvas>

2.在js中设置：

var canvas = document.getElementById('canvas');
canvas.width=300;
canvas.height=300;

正常效果

image.png