小编典典

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

all

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

例如,我可以<div>通过将heightandwidth属性设置为 100% 来缩放 a,但是 a<canvas>不会缩放,对吗?


阅读 117

收藏
2022-03-18

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

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

2022-03-18