关于 canvas 被拉伸的问题

Re:Linked

通常 canvas 被拉伸都是因为这个:

canvas的默认大小是300(宽)x150(高)。如果通过 CSS 或者 canvas.style.height 等的样式属性调节 canvas,它不是直接改变画布大小,而是 拉伸画布,之后画的内容会被一并拉伸。

所以把这玩意用 CSS 调成正方形之后画的正方形是个长方形……

正确的解决方案是改变 canvas 对象的 height 和 width 属性,也就是类似于这样:

1
2
3
var cvs = document.getElementById("canvas");
cvs.height = 600;
cvs.width = 600;

以上。这个问题没见多少人说过,在网上搜索原因的时候,只看到一篇文章写了关于这个的事情。今日再述于此以彰其坑。