使用JavaScript繪製到HTML5畫布時調整.png圖像的大小

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

我已經很難找到在你的代碼的問題......但我發現它！

你會討厭這個：你寫image.onLoad而不是image.onload ...是的，javascript是區分大小寫的。 :-)

正確的代碼是：

var image1 = new Image(); 

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

Answer 2

的drawImage（）需要額外的寬度和高度參數：

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

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

Answer 3

是否使用CSS來設置畫布的大小？您需要在元素上設置高度和寬度，否則畫布中的所有內容都會「意外」縮放。這可能是你的問題。

請參閱Strange HTML5 Canvas drawImage behaviour