我正在尝试在我的一个项目中使用 Twitter Bootstrap ，而我真正想要的是带有链接的标题和页面中间的 HTML Canvas 。引用:
当我添加一个 html Canvas 标签并为其指定宽度和高度时，我得到了两个不良影响:
- Canvas 的上边框被截断，必须应用边距 Canvas
- Canvas 被推到右边，我必须再次 对其应用 margin 。
我希望 Canvas 位于页面的中央。
最佳答案
为了让您的 canvas 元素保持在屏幕中央，您必须使用包含 div 将其包裹起来，如下所示。
<div>
<canvas></canvas>
</div>
然后我们需要创建并应用一个类，该类将为包含的 div 提供与内部 Canvas 相同的像素宽度。
<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>
这将使您的 Canvas 居中，并在您调整浏览器窗口大小时使 Canvas 保持在中心位置。至于覆盖新创建的 Canvas 元素的导航栏，您需要向主内容容器添加更多样式。
<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>
关于html - 推特 Bootstrap 和 Canvas 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15626952/