javascript - 调整HTML5画布大小以适合窗口(Resize HTML5 canvas to fit window)

Question

How can I automatically scale the HTML5 <canvas> element to fit the page?

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

For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas> won't scale, will it?

(例如，我可以通过将height和width属性设置为100％来缩放<div> ，但是<canvas>不会缩放，是吗？)

  ask by devyn translate from so

Answer 1

I believe I have found an elegant solution to this:

(我相信我找到了一个优雅的解决方案：)

JavaScript

(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

(CSS)

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

Hasn't had any large negative performance impact for me, so far.

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