Javascript 画布在不同大小时表现异常

最近一直在玩弄canvas，但它在不同的大小上表现得很奇怪

这是我的密码：

HTML:

CSS:

canvas{宽度：300px；高度：50px；}

JS:

画布尺寸为300x50时，绘制以下图形：

画布大小为100x200时，将绘制以下图形：

---

很明显，一个像素并不意味着一个像素——我做错了什么吗？

不要使用CSS来更改画布的大小。而是更改元素的大小：

c.width=300;
c.height=50;

这是因为当你用CSS调整大小时，你正在“拉伸”像素。当您更改元素本身的大小时，实际上是在添加/减去像素

c.width=300;
c.height=50;