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

How do we draw a resized image on an html5 canvas?

本文关键字：调整 绘制 图像 html5 我们      更新时间：2023-09-26

我有一个图像要在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()函数本身中包含宽度和高度参数时，代码才能工作。但我不明白的是，为什么图像在context.drawImage()函数访问它之前没有调整大小。

我还打印了警告语句来检查"img"。"身高"answers"身高"。宽度"，它确实被设置为newweight, newwidth的值。为什么context.drawImage()访问旧的高度和宽度值?

Edit -另外，当我在网页上显示图像时(不是在画布上，而是在网页上)，会显示调整大小的图像。但画布不显示调整后的图像。我不明白为什么

不工作的原因是因为您正在更改<img> HTML节点的属性。这些属性是如何在文档中显示节点的布局指令(顺便说一下，这已经过时了)。使用CSS进行布局)。图像元素中显示的图像材料的宽度和高度与此无关。

相关文章：