HTML5画布正在调整我的图像的大小

Question

所以我试图简单地将图像作为画布的完整大小

我知道我的图像的高度和宽度，所以我相应地设置了CSS：

#canvas{
    width:500px;
    height:322px;
}

然后我从这里开始使用该教程将图像放置在画布上。

因为我使用的是图像大小的画布，所以您会认为这会很好地工作， 但是会调整图像的大小 。 为什么会发生这种情况，我该如何解决？

jsfiddle

Answer 1

CSS样式定义了显示的画布的大小。因此，您的画布将显示为500px宽和332px高。 但是并没有真正定义画布中的尺寸。 因此，画布可能仅具有一些默认的像素宽度和高度。 当您新建画布时。 说：

var canvas = document.createElment('canvas');
canvas.width = 500;
canvas.height = 322;

这些宽度和高度定义将定义实际的画布像素大小，并且可以与css进行不同的设置。