调整HTML 5画布的大小以适应窗口

Question

调整HTML 5画布的大小以适应窗口如何自动缩放HTML 5？<canvas>元素以适应页面？例如，我可以得到一个<div>若要通过设置height和width属性为100%，但<canvas>不会扩大，对吧？

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

到目前为止，还没有给我带来任何负面影响。