将HTML画布缩放到浏览器窗口大小，但不缩放画布中的元素

Question

有没有办法将HTML画布扩展到浏览器窗口宽度/高度但不缩放其中的内容？假设我正在创建小行星，并希望使用整个浏览器窗口，但是当我调整窗口大小时，不希望岩石和船只向上/向下扩展。

Answer 1

1. 不要使用CSS来缩放画布。这将对画布中的像素进行上/下缩放。

2. 而是在适当的元素（例如窗口）上观察resize事件，然后在JavaScript中适当地更改画布的.width和.height属性。这将改变您绘制的像素数。

3. 继续使用您始终使用的相同固定大小的绘图命令。对象将在屏幕上保持相同的像素大小。

4. 要使内容在屏幕上居中，您可能需要在调整大小后立即在上下文中使用translate()将0,0视为画布的中心。例如：

   var ctx = document.querySelector('#mycanvas').getContext('2d');
   window.addEventListener('resize',function(){
     var width  = calculateDesiredWidth();  // your code here
     var height = calculateDesiredHeight(); // your code here
     ctx.canvas.width  = width;
     ctx.canvas.height = height;
     ctx.translate(width/2,height/2); // now 0,0 is the center of the canvas.
   },false);
   

完整的工作示例：http://phrogz.net/tmp/canvas-fullscreen.html