如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客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
