Question

我正在使用HTML5 canvas元素。我正在使用以下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);
}

Answer 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);
}

Answer 2

尝试将！important放在外部样式上，可能是某些内容覆盖它，但内联覆盖最后一次。

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

使用外部css文件时，画布大小错误

2 个答案: