HTML5 Canvas的調整大小功能

Question

我設法將動態調整大小的HTML5 Canvas放在一起，但是出現了問題。 例如，它僅縮放高度，而不縮放寬度。 我的畫布的寬度為900px ，高度為850px 。 另一個問題是它也會擴大畫布，使其超出定義的寬度和高度。

我究竟做錯了什么？

這是我到目前為止嘗試過的：

 var canvas, stage, exportRoot; function init() { createjs.MotionGuidePlugin.install(); canvas = document.getElementById("canvas"); exportRoot = new lib.Hat_finale(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(24); createjs.Ticker.addEventListener("tick", stage); } function resize() { var height = window.innerHeight; var ratio = canvas.width / canvas.height; var width = height * ratio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; } window.addEventListener('load', resize, false); window.addEventListener('resize', resize, false); 

 #container { margin: 0 auto; max-width: 900px; max-height: 850px; } 

 <div id="container"> <canvas id="canvas" width="900" height="850" style="background-color:#ffffff"></canvas> </div> 

更新：

如果我嘗試@havex所說的，請像這樣更改屬性： canvas.width = width; 和canvas.height = height; 而不是canvas.style.width = width+'px'; 和canvas.style.height = height+'px'; 我得到的是一個可調整大小的框，但不是動畫。 參考圖片：

Answer 1

我無法解釋為什么會發生這種情況，因為它是凌晨4點30分，我還沒有睡過，但是請更改它們，它應該可以工作（您可以刪除邊框）：

HTML

<div id="container">
<canvas id="canvas" style="background-color:#ffffff"></canvas>
</div>

CSS

#container{
  margin:0 auto;
  width:900px;
  height:850px;
  border: 1px solid black;
}

canvas { width: 900px; height: 850px; border: 1px solid red; }

http://jsfiddle.net/Ln5z1zab/