调整HTML5画布大小以适应窗口

shekhardevyn提出了一个问题:Resize HTML5 canvas to fit window,或许与您遇到的问题类似。

回答者devyn给出了该问题的处理方式:

I believe I have found an elegant solution to this:

JavaScript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}

Hasn't had any large negative performance impact for me, so far.

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:这个JavaScript习语的基础是什么?
下一篇:在jQuery中,如何通过name属性选择一个元素?

相关推荐

  • 鼠标在画布上的位置

    Dagg NabbitSam Lee提出了一个问题:Getting mouse location in canvas,或许与您遇到的问题类似。 回答者Jani Hartikainen给出了该问题的处理...

    2 年前
  • 防止对HTML5的浏览器历史popstate滚动

    Alex Malet de Carteret提出了一个问题:Prevent browser scroll on HTML5 History popstate,或许与您遇到的问题类似。

    3 年前
  • 防止HTML5视频被下载(右键保存)?

    Mureinikpython提出了一个问题:Prevent HTML5 video from being downloaded (right-click saved)?,或许与您遇到的问题类似。

    3 年前
  • 选择移动Web HTML5框架[关闭]

    Andrew BarberSarfraz提出了一个问题:Choosing Mobile Web HTML5 Framework [closed],或许与您遇到的问题类似。

    3 年前
  • 调整HTML5画布中的图像大小

    Telanor提出了一个问题:Resizing an image in an HTML5 canvas,或许与您遇到的问题类似。 回答者Mikksyockit给出了该问题的处理方式: So what ...

    3 年前
  • 读 《HTML5 揭秘》有感

    最近在补一些 HTML 的书籍,偶尔读到这本书,虽然这本书已经是10年以前的书籍了,不过其中有些有趣的知识点与观点被我提取了出来。 标准创建与技术实现冲突 作者在开始就提出了 Mozilla 开发人员...

    6 个月前
  • 详解HTML5游戏玩家流失原因

    对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家...

    5 年前
  • 设置自定义HTML5所需的字段验证消息

    G5WSumit Bijvani提出了一个问题:Set custom HTML5 required field validation message,或许与您遇到的问题类似。

    3 年前
  • 设置HTML5音频位置

    katspaugh提出了一个问题:Setting HTML5 audio position,或许与您遇到的问题类似。 回答者soemarko给出了该问题的处理方式: Works on my chrom...

    2 年前
  • 让HTML5 localStorage键

    Brian Tompsett - 汤莱恩Simone提出了一个问题:Get HTML5 localStorage keys,或许与您遇到的问题类似。 回答者Kevin Ennis给出了该问题的处理方式...

    3 年前

官方社区

扫码加入 JavaScript 社区