将 HTML 画布缩放到浏览器窗口大小，但不缩放画布内的元素 [英] Scale HTML canvas to browser window size but don't scale elements within the canvas

问题描述

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

Is there a way to scale your HTML canvas to the browser window width/height but not scale the contents within it? Say I was creating Asteroids and want to use the entire browser window but don't want the rocks and ship to scale up/down when I resize the window.

推荐答案

1. 不要使用 CSS 来缩放画布.这将放大/缩小画布中的像素.

1. Do not use CSS to scale your canvas. That will scale the pixels in the canvas up/down.

相反，观察适当元素(例如窗口)上的 resize 事件，然后更改 .width 和 .height 属性.这将改变您绘制的像素数.

Instead, watch for a resize event on an appropriate element (e.g. the window) and then change the .width and .height properties of the canvas appropriately in JavaScript. This will change how many pixels you are drawing with.

继续使用您一直使用的固定尺寸绘图命令.对象将在屏幕上保持相同的像素大小.

Continue to use the same fixed-size drawing commands you always use. Object will stay that same pixel size on screen.

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

To keep your contents centered on the screen, you may want to treat 0,0 as the center of the canvas by using translate() on the context right after you resize it. For example:

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);

这篇关于将 HTML 画布缩放到浏览器窗口大小，但不缩放画布内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！