通常 canvas 被拉伸都是因为这个:
canvas的默认大小是300(宽)x150(高)。如果通过 CSS 或者 canvas.style.height
等的样式属性调节 canvas,它不是直接改变画布大小,而是 拉伸画布,之后画的内容会被一并拉伸。
所以把这玩意用 CSS 调成正方形之后画的正方形是个长方形……
正确的解决方案是改变 canvas 对象的 height 和 width 属性,也就是类似于这样:
var cvs = document.getElementById("canvas");
cvs.height = 600;
cvs.width = 600;
javascript
以上。这个问题没见多少人说过,在网上搜索原因的时候,只看到一篇文章写了关于这个的事情。今日再述于此以彰其坑。