【问题标题】:Scale HTML canvas to browser window size but don't scale elements within the canvas将 HTML 画布缩放到浏览器窗口大小,但不缩放画布内的元素
【发布时间】:2012-01-30 20:56:30
【问题描述】:

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

【问题讨论】:

  • 小行星、岩石和船.. wut?
  • +1 提出一个好问题。我相信我有你需要的答案。

标签: html canvas html5-canvas


【解决方案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

【讨论】:

  • +1 : 你真是个了不起的人.. 继续努力.. 新年快乐 :)
  • Phrogz,非常感谢您的回答和工作示例。这很有帮助!
猜你喜欢
  • 2016-12-18
  • 1970-01-01
  • 2016-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-02
  • 1970-01-01
相关资源
最近更新 更多