我们如何在html5画布上绘制调整大小的图像?

时间:2014-06-04 07:11:05

标签: javascript jquery image html5-canvas

我有一个要在html5画布上绘制的图像。我想在绘制到画布上之前将此图像调整到一定的高度和宽度。我的代码目前包括:

img = new Image();
img.src = "vivo.jpg";

// calcuate new height and width

img.height = newheight;
img.width = newwidth;
$("#cnvs").attr({
    "height" : newheight,
    "width" : newwidth
    });
context.drawImage(img, 0, 0);

只有在context.drawImage()函数本身中包含width和height参数时,代码才有效。但我不明白的是,为什么在context.drawImage()函数访问它之前图像没有调整大小。

我还打印了警告语句来检查“img.height”和“img.width”,它确实设置为newheight,newwidth的值。为什么context.drawImage()会访问旧的高度和宽度值?

编辑 - 此外,当我在网页上显示图像(不在画布上,而只是在网页上)时,会显示已调整大小的图像。但画布不显示已调整大小的图像。我不明白为什么

1 个答案:

答案 0 :(得分:1)

它不起作用的原因是因为您正在更改<img> HTML节点的属性。这些属性是布局指令如何在文档中显示节点(顺便说一下,这是过时的。使用CSS进行布局)。 image-element中显示的图像材质的宽度和高度与此无关。