4

プロジェクトの1つでTwitterブートストラップを使用しようとしていますが、本当に必要なのは、ページの中央にリンクとHTMLキャンバスがあるヘッダーです。参照：

ブートストラップページの例

HTMLキャンバスタグを追加して幅と高さを指定すると、2つの望ましくない効果が発生します。

  • キャンバスの上部の境界線は切り取られており、キャンバスにマージンを適用する必要があります
  • キャンバスが右に押され、再びマージンを適用する必要があります。

キャンバスをページの中央に配置したいのですが。

4

1 に答える 1

8

キャンバス要素を画面の中央に保持するには、次のようにそれを含むdivでラップする必要があります。

<div>
    <canvas></canvas>
</div>

次に、含むdivに内部のキャンバスと同じピクセル幅を与えるクラスを作成して適用する必要があります。

<style>
    .container-canvas {
        /* This could be done in one single declaration. See the extended sample. */
        margin-right: auto;
        margin-left: auto;
        width: 800px;
    }
</style>

<div class="container-canvas">
    <canvas width="800" height="480"></canvas>
</div>

これにより、キャンバスが中央に配置され、ブラウザウィンドウのサイズを変更するときにキャンバスが中央に保持されます。新しく作成したキャンバス要素をオーバーレイするナビゲーションバーについては、メインコンテンツコンテナにさらにスタイルを追加する必要があります。

<style>
    .container-main {
        margin-top: 75px;
    }
</style>

<div class="container container-main">
    <div class="container-canvas">
        <canvas width="800" height="480"></canvas>
    </div>
</div>

拡張/完全なサンプルについては、以下を参照してください。

<!doctype html>
<html>
    <head>
        <title>Bootstrap + Canvas</title>

        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">

        <style>
            .container-main {
                margin-top: 75px;
            }

            .container-canvas {
                margin: 0 auto;
                width: 800px;
            }

            canvas {
                border: 1px solid #333;
            }
        </style>

    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="#">Project name</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="container container-main">
            <div class="container-canvas">
                <canvas id="mycanvas" width="800" height="480">
                    This is my fallback content.
                </canvas>
            </div>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            function draw() {
                var canvas = document.getElementById("mycanvas");

                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");

                    ctx.fillStyle = "rgb(200,0,0)";
                    ctx.fillRect(10, 10, 55, 50);

                    ctx.fillStyle = "rgba(0,0,200,0.5)";
                    ctx.fillRect(30, 30, 55, 50);
                } else {
                    alert("Canvas isn't supported.");
                }
            }

            $(function() { 
                draw();
            });
        </script>
    </body>
</html>
于 2013-03-26T01:10:33.140 に答える