-1 
<!doctype html>
<html>
  <head>
    <title>Game</title>

    <style media="screen" type="text/css">
      body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #canvas {
        position: absolute;
      }
    </style>

    <!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
    <!-- <meta charset="utf-8"> -->
    <!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
  </head>

  <body>
    <canvas id="canvas">
      Your browser needs to support canvas to play this game!
    </canvas>

    <!-- Include libraries -->
    <script type="text/javascript" src="js/pentagine/build/pentagine.js"></script>
    <script type="text/javascript" src="js/cp.min.js"></script>

    <!-- Include game classes -->
    <script type="text/javascript" src="js/MenuState.js"></script>
    <script type="text/javascript" src="js/Block.js"></script>
    <script type="text/javascript" src="js/Constants.js"></script>
    <script type="text/javascript" src="js/Utils.js"></script>
    <script type="text/javascript" src="js/ScoreState.js"></script>
    <script type="text/javascript" src="js/PlayState.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

相关行是 CSS 和这些：

<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->

我想让我的画布占据尽可能多的屏幕。我希望我的画布是全屏的，这曾经在 Firefox、Chromium 和 Firefox OS 上都可以正常工作，但现在它似乎无法正常工作。我需要帮助找出 CSS 和content=""标签来制作画布（因此画布context.width和context.height占用尽可能多的空间。

4

2 回答 2

1

小提琴：http: //jsfiddle.net/AwLwF/

CSS：

body {
   position:relative;
}
canvas {
   position:absolute;
   left:0;
   top:0;
}

JS：

$("canvas").width($(document).width());
$("canvas").height($(document).height());
var ctx = document.getElementById("canvas-element").getContext("2d");
function draw() {
    //draw here
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,200,100);
    requestAnimationFrame(draw);
}
draw();

但是问题不大。纵横比。奇怪的分辨率会破坏绘制元素的比例。

于 2013-09-16T22:38:28.747 回答
0

这应该使画布在 CSS 中全屏显示（未经测试，但适用于 div，所以你应该也可以使用画布）：

canvas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
    height: auto;
}

在 javascript 中，您可以读取窗口/文档宽度/高度并将其添加到画布以进行计算。像这样在 jQuery 中：

$(document).height();
$(document).width();

像这样没有 jQuery：

document.width;
document.height;

我真的希望这对你有帮助。

于 2013-09-16T19:42:42.273 回答