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

Question

有没有办法将 HTML 画布缩放到浏览器窗口的宽度/高度，但不缩放其中的内容？假设我正在创建 Asteroids 并且想要使用整个浏览器窗口，但不希望在我调整窗口大小时让岩石和飞船按比例放大/缩小。

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