使用Fabric.js创建圆形却生成椭圆形的技术问题求助

嘿，我之前刚踩过这个坑！你遇到的圆形变椭圆问题，几乎可以肯定是画布的尺寸设置方式不对导致的。

问题根源 #

Fabric.js依赖HTML的<canvas>元素来渲染，但如果只通过CSS给<canvas>设置宽高，而没有在标签本身指定width和height属性，浏览器会把canvas的默认尺寸（一般是300px×150px）强制拉伸到CSS设定的大小，这种拉伸就会让原本的圆形被挤压成椭圆。

举个反例，如果你是这么写的：

<!-- 错误示例：仅用CSS设置尺寸 -->
<canvas id="mySampleCanvas" style="width:600px; height:400px;"></canvas>

那不管你画什么图形，都会被拉伸变形。

解决方法 #

你需要同时给<canvas>标签设置width和height属性，让画布的实际像素尺寸和显示尺寸一致：

<!-- 正确示例：同时设置标签属性和CSS（可选） -->
<canvas id="mySampleCanvas" width="600" height="400" style="width:600px; height:400px;"></canvas>

如果需要动态调整画布尺寸，也可以用Fabric.js提供的方法来设置，避免拉伸：

this.canvasIns = new fabric.Canvas('mySampleCanvas');
// 动态设置画布实际尺寸
this.canvasIns.setWidth(600);
this.canvasIns.setHeight(400);

var myCircle = new fabric.Circle({ radius:50, borderColor: 'black', fill:'#fff' });
this.canvasIns.add(myCircle);
this.canvasIns.renderAll();

这样调整后，你的圆形就会是完美的正圆啦！

内容的提问来源于stack exchange，提问作者Vinita