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

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 画布缩放到浏览器窗口大小，但不缩放画布内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！