调整HTML5画布的大小以适合窗口

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

/* 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...
}

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

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

以上是 调整HTML5画布的大小以适合窗口 的全部内容， 来源链接： utcz.com/qa/407111.html

回到顶部