html学习 - canvas拉伸问题

最近画图，需要根据用户的输入来动态更改画布大小。
但是用js改变完画布大小后发现图形都被拉伸了。

想了半天没弄懂，然后搜索了下解决办法。原来是不允许随便用js来控制canvas的长宽。

canvas的默认长宽是 300 * 150.

不拉伸的解决办法：

var theCanvas = document.getElementById("canvasId");
theCanvas.width = 500;
the Canvas.width = 400;

这样更改canvas画布的长宽就不会有问题了。

假如用：

$('#canvasId').css('height', 500);
$('#canvasId').css('width', 400);

这样的话就会被拉伸了。