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/