無指定尺寸的html5畫布縮放

Question

我剛開始使用html5 canvas元素。

我使用的是最新的Firefox和鉻瀏覽器。到目前爲止，他們的回覆都是 。

我想要實現的是縮放圖像，而不必 指定畫布或圖像的尺寸。我希望畫布填充 瀏覽器窗口，並且圖像填充畫布時沒有指定任何尺寸的 。當用戶調整瀏覽器的框架時，重新調整畫布及其在 飛行中的圖像。

我正在測試的大廈圖片是4284x2844。

我設法達到動態縮放，但有一個問題... 如果我沒有指定大小的圖像變得模糊。

這是我的第一個stackoverflow問題，我還沒有徵服 格式。所以，請看看代碼的小金額超過 在引擎收錄：

http://pastebin.com/88faqJUx

謝謝您的幫助。

我找到了解決辦法...

添加兩行，沒有其他變化，並獲得成功，但在這一點上我不太確定 爲什麼它最初是失敗，而是徹底的快樂運動上...

<canvas id="taba_main_canvas"> 
Your browser does not support the canvas element. 
</ canvas> 

<script type="text/javascript"> 
    var main_canvas=document.getElementById("taba_main_canvas"); 
    var cxt=main_canvas.getContext("2d"); 


    // adding these next two lines solved the blurriness issues   

    //Set the canvas width to the same as the browser 
    main_canvas.width = window.innerWidth; 
    main_canvas.height = window.innerHeight; 


    var img=new Image(); 
    <!-- mansion pic 4284x2844 --> 
    img.src="images/mansion_3344.png"; 

    img.onload = function() 
    { 
     <!-- use the graphics full size and scale the canvas in css --> 
     cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height); 

    } 

</script> 

只是一個小小的問題，圖像的垂直尺寸顯然是短短的幾行比帆布高 ，所以我得到一個vertival滾動條。較高的瀏覽器窗口拖動，通常 將消除垂直滾動條沒有效果。我試過在代碼中操縱畫布或圖像高度 ，但這並沒有改變任何東西。

儘管如此，讓圖像看起來乾淨是一大勝利。我正在繼續前進，稍後將重新訪問此 。

Answer 1

另一種方法是鎖定文檔onresize事件並使用window.innerWidth和window.innerHeight或其他類似的東西調整畫布的大小。我自己也是這樣用的，但那是我不關心IE支持的東西 - 關於瀏覽器支持的信息，請參閱quirksmode上的W3C DOM Compatibility - CSS Object Model View。另請注意，innerWidth和innerHeight中包含的滾動條寬度爲;如果您的頁面可能需要滾動，您可能希望執行減去20等操作，並使用合適的背景顏色填充包含元素。

我認爲你不只是試圖畫一個圖像 - 如果你只是這樣做，<img>將是一個更好的匹配。

編輯：jQuery有$(document).width();和$(document).height();這似乎得到正確的數字。另一個編輯：其實他們是錯的;它們是文檔的寬度和高度，而不是視口的寬度和高度，所以我認爲innerWidth和innerHeight可能都是。