调整HTML5画布大小以适合窗口 [英] Resize HTML5 canvas to fit window

问题描述

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

，我可以通过设置 height 和 width 来获得< div> / code>属性为100％，但< canvas> 不会缩放，

解决方案

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

JavaScript >

  / * important！为了对齐，你应该使事物
 *相对于画布的当前宽度/高度。 
 * / 
 function draw（）{
 var ctx =（canvas上下文）; 
 ctx.canvas.width = window.innerWidth; 
 ctx.canvas.height = window.innerHeight; 
 //...drawing code ... 
} 
  

CSS

  html，body {
 width：100％; 
 height：100％; 
 margin：0px; 
} 
  

对我来说没有什么大的负面影响。 / p>

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

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: 0px;
}

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

这篇关于调整HTML5画布大小以适合窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！