调整 HTML5 画布大小以适应窗口

2022-01-17 00:00:00 javascript html html5-canvas

如何自动缩放 HTML5 <canvas> 元素以适应页面?

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

例如，我可以通过将 height 和 width 属性设置为 100% 来使 <div> 进行缩放，但是<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?

推荐答案

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

I believe I have found an elegant solution to this:

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;
}

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

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

相关文章