4

我正在尝试在我的一个项目中使用 twitter 引导程序，而我真正想要的是带有链接的标题和页面中间的 HTML 画布。参考：

示例引导页面

当我添加一个 html 画布标签并给它一个宽度和高度时，我得到了两个不良影响：

  • 画布的上边框被截断，必须对画布应用边距
  • 画布被推到右边，我必须再次对其应用边距。

我希望画布留在页面的中心。

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 回答