HTML5圖像和縮放問題

Question

當我在畫布中繪製圖像時，我必須指定畫布寬度和高度，以便它與我試圖繪製的圖像大小相匹配。

<script> 
    window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = "<%=image_path('logo.jpg')%>"; 

    }; 

</script> 
<canvas id="myCanvas" width="700" height="400"></canvas> 

指定畫布寬度和高度也不是那麼好，因爲我可能需要比這取決於屏幕的分辨率那些，我需要在比例工作，使用不同的值，所以我想知道如何處理這個問題，以及如何繪製圖像，而不必指定畫布的寬度和高度。

Answer 1

我會建議使用百分比來指定高度和寬度。這些會將值定義爲包含塊的百分比。

此外，任何時候你給這些屬性的某些值，類型應明確定義（例如width="700px"）。

儘管如此，請謹慎使用，因爲這些可能會扭曲圖像，具體取決於您如何定義屬性。

祝你好運。

Answer 2

您不一定需要指定畫布的寬度和高度。您可以隨時通過其寬度和高度屬性來更改它。你也可以有一個固定尺寸的畫布，然後縮放圖像，使它們適合它或拉伸。

你可以在這個fiddle看到幾種情況。

1. 最初畫布沒有寬度和高度
2. 當圖像被加載時，它激活「自動」模式，這意味着，它改變畫布大小的圖像的大小

然後，您可以用按鈕發揮觸發其它縮放模式

• 適合：適合在400x400的畫布圖像和中心它
• 拉伸：調整圖像的大小，使其充滿400x400的畫布完全
• 真實：圖像呈現在原來的大小，但在畫布尺寸爲400×400
• 自動：畫布大小匹配圖片尺寸

我希望這可以幫助你得到一些想法。