0

スクロールせずに、ウィンドウのすべてのスペースを占めるキャンバス要素を作成したいと思います。私は次のことをします：

  1. マージンとパディングをリセットする
  2. ウィンドウのサイズを取る
  3. 体のすべての子供を削除します
  4. キャンバスを作成し、キャンバスサイズをウィンドウサイズに設定します
  5. ボディにキャンバスを追加

それは機能しますが、ページの下部にいくつかの余分なピクセルを取り、ブラウザーはこれらのピクセルを表示するために上下にスクロールします。iPadとAndroid（Galaxy Nexus）でテストしました。同じ効果なので、バッグではなく、誤解されている機能のようです。

これらのピクセルとは何か、そしてそれらを削除する方法についてのアイデアはありますか？

コード：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8" />
  <title>My Page</title> 
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    $(function() {
      initApp();
    });

    function initApp() {
      windowWidth = $(window).width();
      windowHeight = $(window).height();

      canvas = document.createElement('canvas');
      canvas.width = windowWidth;
      canvas.height = windowHeight;
      context = canvas.getContext("2d");

      var body = document.getElementById("bo");
      while (body.firstChild) {
        body.removeChild(body.firstChild);
      }
      body.appendChild(canvas);

      // write something for test
      context.fillStyle = "#00ff00";
      context.fillRect(0, 0, windowWidth, windowHeight);
      context.fillStyle = "#ff0000";
      context.fillRect(0, 0, 200, 200);
      context.fillStyle = "#000000";
      context.font = '20px _sans';
      context.textBaseline = 'top';
      context.fillText ("Canvas " + windowWidth + "x" + windowHeight + "!", 0, 0);
    }

  </script>
</head> 
<body id="bo">
</body>
</html>
4

1 に答える 1

1

スクロールバーを削除するだけで、余分なピクセルが欠落する心配がない場合は、CSSスタイルoverflow: hiddenをbody要素に追加するだけです。display: blockまた、canvas要素に追加してみてください。

于 2012-12-10T07:35:59.787 に答える