html5 canvas画布居中

最新推荐文章于 2024-08-05 22:52:23 发布

SharonLucky

最新推荐文章于 2024-08-05 22:52:23 发布

阅读量3.9w

点赞数 11

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_21577869/article/details/50965175

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天写一个demo的时候想把canvas的画布居中，一开始代码是这样的：

#scene{

margin:0 auto;

}

 <canvas id="scene" width="800" height="600"></canvas>

如图，设置了canvas的margin：0 auto；可是显示效果并不居中。

只有黑色的边框，怎么解决呢？

给canvas一个div，让div包裹canvas，设置div的宽度，并设置div的margin：0 auto;

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .container{
      margin:0 auto;
      width:800px;
    }
    #scene{
      border:1px solid black;
    }
  </style>
</head>
<body>
<div class="container">
  <canvas id="scene" width="800" height="600"></canvas>
</div>
</body>
</html>