javascript - 调整 HTML5 Canvas 大小以适应窗口

Question

如何自动缩放 HTML5 <canvas>适合页面的元素？

例如，我可以得到 <div>通过设置 height 进行缩放和 width属性为 100%，但 <canvas>不会扩展，是吗？

Answer 1

我相信我已经找到了一个优雅的解决方案:

JavaScript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

到目前为止，对我的性能没有任何大的负面影响。