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

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

我目前的职能是：

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

drawImage（）采用附加的宽度和高度参数：

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

---

我很难在您的代码中找到问题。。。但是我找到了

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

正确的代码是：

var image1 = new Image();

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

---

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

---

请参见

是的，该方法有两个“重载”版本。我尝试添加宽度和高度的参数，但当我在浏览器中刷新页面时，图像仍然太大…image1.onLoad=function（）{context.drawImage（image1，50，50，10，10）；}；image1.src=“1.png”；原始文章已编辑，以显示添加的宽度和高度参数。请发布代码的JSFIDLE。Mikko提交的代码运行良好