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

Question

所以我试图简单地将图像作为画布的全尺寸

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

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

然后我使用这里的教程在画布上放置图像。

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

jsfiddle

score 1 · Accepted Answer

Css 样式定义了显示的画布的大小。所以你的画布看起来是 500px 宽和 332px 高。但并没有真正定义画布内的尺寸。所以画布可能只有一些默认的像素宽度和高度。当你新的画布。说：

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

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