画布表现出奇怪的不同大小

Question

最近一直在玩帆布，但它的表现很奇怪。

这是我的代码：

HTML：<canvas></canvas>

CSS：canvas { width:300px; height:50px; }

JS：

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

ctx.fillRect(10,10,50,50); // fill a 50x50 square at pos (10,10)

在画布尺寸为300x50时，绘制如下：

在画布尺寸为100x200时，绘制如下：

很明显，一个像素实际上并不意味着一个像素 - 我做错了吗？

Answer 1

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

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

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