Question

我正在尝试使用JavaScript将几个.png图像绘制到HTML5画布上。我目前有一个将图像绘制到画布的功能，但图像对于画布来说太大了，所以只显示了部分图像。

我目前的职能是：

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";

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

提前致谢！

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

var image1 = new Image();

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

Answer 1

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

请参阅Strange HTML5 Canvas drawImage behaviour

Answer 2

我在代码中找不到问题...但我发现了它！

你会讨厌这个：你写了image.onLoad而不是image.onload ...是的， javascript是区分大小写的。： - ）

正确的代码是：

var image1 = new Image();

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

Answer 3

drawImage（）需要额外的宽度和高度参数：

   context.drawImage(image, x, y, width, heighT)

https://duckduckgo.com/?q=!mdn+drawimage

使用JavaScript绘制到HTML5画布时调整.png图像的大小

3 个答案: