3

我正在尝试使用 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";
4

3 回答 3

4

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

请参阅奇怪的 HTML5 画布 drawImage 行为

于 2012-06-20T12:37:42.253 回答
2

我在您的代码中找不到问题......但我找到了！

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

正确的代码是：

var image1 = new Image();

image1.onload = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";
于 2012-04-25T11:45:47.637 回答
0

drawImage() 需要额外的宽度和高度参数：

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

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

于 2012-04-25T07:39:12.120 回答