爲什麼canvas drawImage方法縮放？

我想用以下代碼在寬度爲150px和高度爲150px的畫布上繪製圖片。然而，圖片似乎是隨着我設置到畫布的寬度和高度屬性（我將寬度設置爲500px，高度設置爲300px）進行縮放。爲什麼畫布以這種方式工作？如何在px中以絕對尺寸在畫布上繪製圖像？爲什麼canvas drawImage方法縮放？

非常感謝！

<head> 
    <meta charset="UTF-8"> 
    <title>Base</title> 
    <script type="text/javascript" src="./js/jquery-1.10.1.js"></script> 
    <script type="text/javascript"> 
     var img = new Image(); 

     $(window).ready(function() { 
      img.src = "./Images/img.jpg";; 

      ctx = document.getElementById("main").getContext("2d"); 

      img.onload = function() { 
       ctx.drawImage(img, 0, 0, 150, 150); 
      } 
     }); 

    </script> 
</head> 

<body> 
    <canvas id="main" style="background-color:yellow; width:500px; height:300px; z-index:1; position:absolute;"></canvas> 
</body>

來源

2013-11-21 darklord

你需要設置畫布的實際像素分辨率，即設置的行和列的像素數（通過使用在canvas標籤width和height屬性）。否則，你只需要獲得一個畫布，其默認分辨率由CSS決定的寬度和高度來縮放。

編輯：想想這樣。當你在DOM中放置一個畫布時，你基本上聲明瞭像一個具有特定寬度和高度像素的可操縱圖像。現在該圖像可以任意縮放。因此，如果您有200x200的畫布，但是在CSS中聲明畫布是400px x 200px，則畫布的每個像素都將以2像素的高度呈現（具有抗鋸齒功能）。因此，繪製到該畫布上的任何圖像都將是其平常高度的兩倍。因此，如果您希望畫布上像素的寬度和高度表示像素在屏幕上呈現的像素**，則您需要將寬度和高度設置爲實際涉及的像素數，而不是使用CSS。

**像素不一定代表屏幕上的像素。例如，我正在將其作爲Surface Pro進行編寫，其中許多應用程序的dpi縮放活躍，否則應用程序按鈕將非常小，觸摸時會有點難以激活。我的瀏覽器看到寬度的屏幕寬度是1920/1.5 = 1280.我可以將瀏覽器的這個設置重新啓動，並且它會看到完整的1920 ...現在，這會如何影響圖像呈現？我認爲即使使用此設置，瀏覽器也可以呈現全真像素分辨率圖像; Windows並不僅僅是渲染一些模糊的瀏覽器版本，但我必須做一些研究才能真正看到與瀏覽器結合的Windows。

來源

2013-11-21 02:05:58 JayC

夠清楚！非常感謝你！ – darklord

爲什麼canvas drawImage方法縮放？

回答

相關問題