1

我正在使用 HTML5 画布元素。我正在使用以下 javascript 将图像绘制到画布中：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    ctx.drawImage(img,0,0);
}

这工作正常。但是我遇到了一些奇怪的 CSS 问题。当我像下面这样使用内联 css 时，图像在画布中完美缩放：

<canvas id="canvas" width="800" height="448"></canvas>

但是，当我删除内联 css 并使用外部 css 文件时，图像对于画布来说太大了，我只看到图像的左上角。这是我正在使用的CSS：

#canvas {
    height:448px;
    width:800px;
    border:none;
}

当我使用内联 css 时，绘制的图像是否以某种方式从画布继承 css？不知道这里发生了什么，但我想使用外部 css 文件。

编辑 如果我没有为画布元素提供样式，它会更小，但仍然只显示图像的上角。当我使用 css 文件对其进行样式设置时，画布更大，但就像它只是放大了图像一样。显示相同数量的图像，现在只是更大了。

编辑 2 根据收到的答案，我现在正在使用 javascript 调整画布的 dom 大小。我将 img.onload 函数更改为以下内容：

img.onload = function() {
    if (options.imageWidth == 0 && options.imageHeight == 0) {
        canvas.height = this.height;
        canvas.width = this.width;
    } else {
        canvas.height = options.imageHeight;
        canvas.width = options.imageWidth;
    }
    ctx.drawImage(img,0,0);
}
4

2 回答 2

4

画布有两种尺寸 - 实际像素网格尺寸（在width和height属性中）和 CSS 尺寸。

如果未指定像素大小，则通常默认为 300x300。

CSS 大小仅指定页面中占用的空间量，默认为像素大小。如果它们不相等，图像将被缩放。

您必须在元素中指定像素大小<canvas>，或使用 Javascript 设置它：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    canvas.width = this.width;    // new code
    canvas.height = this.height;  //    "
    ctx.drawImage(img, 0, 0);
}
于 2012-09-26T06:44:27.547 回答
0

尝试将 !important 放在您的外部样式上，可能是某些东西覆盖了它，但内联它最后覆盖了。

#canvas {
    height:448px !important;
    width:800px !important;
    border:none !important;
}
于 2012-09-26T06:21:07.507 回答