javascript - 使用 JavaScript 绘制到 HTML5 Canvas 时调整 .png 图像的大小

Question

我正在尝试使用 JavaScript 将一些 .png 图像绘制到 HTML5 Canvas 上。我目前有一个函数可以将图像绘制到 Canvas 上，但是图像对于 Canvas 来说太大了，所以只显示了一部分。

我目前拥有的功能是:

function drawImage(x, y){
            var numberImage = new Image();
            numberImage.src = imageSource;
            context.drawImage(numberImage, x, y);

        }

然后我使用以下方法调用该函数:

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";

我只是想知道是否有人知道在将图像绘制到 Canvas 时调整图像大小的方法，以便我可以只显示缩略图大小的图像？

提前致谢!

我已经尝试在 drawImage 函数中添加参数来调整图像的大小，但这似乎没有任何区别......

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";

Answer 1

您是否使用 CSS 设置 Canvas 的大小？您需要在元素上设置高度和宽度，否则 Canvas 中的所有内容都将“意外”缩放。这可能是您的问题。

参见 Strange HTML5 Canvas drawImage behaviour