使用外部 css 文件时画布图像大小错误答案

【问题标题】：Canvas image sized wrong when using an external css file使用外部 css 文件时画布图像大小错误
【发布时间】：2012-09-26 14:50:47
【问题描述】：

我正在使用 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 文件。

编辑如果我没有为 canvas 元素提供样式，它会更小，但仍然只显示图像的上角。当我使用 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);
}

【问题讨论】：

检查外部css文件链接..可能是错字

标签： javascript css html

【解决方案1】：

画布有两种尺寸 - 实际像素网格尺寸（在 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);
}

【讨论】：

【解决方案2】：

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

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

【讨论】：