Question

下面是我在背景图片上显示画布的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>



    <style>
        body, canvas, div {

            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>

    <style type="text/css">

    body {

    background-image: url('bg.jpg');


    }

    </style>
</head>
<!--body style="padding:0; margin: 0; background: #000;"-->
<!--background-color: #cccccc;-->
<canvas id="gameCanvas" width="960" height="640"></canvas>
         <script src="frameworks/cocos2d-html5/CCBoot.js"></script>
         <script src="src/lib/build/build.js" type="text/javascript" ></script>
         <script type="text/javascript">require('boot');</script> 
<script src="main.js"></script>
</body>
</html>

但是在它显示网页中心的画布之前，它将显示如下：

enter image description here

而不是在网页的中心。

欢迎发表评论。

Answer 1

body, canvas, div {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}
canvas {
     margin: auto auto auto auto
}

应该这样做。

Answer 2

为了使网页居中，您可以计算出正文大小和画布大小之间的差异。例如

diffHeight =（bodyHeight-canavasheight）//高度差异 diffWidth =（bodyWidth-canvasWidth）//宽度差异

然后你可以把你的margin-left等于diffWidth的一半，margin-top等于diffHeight的一半。

设置保证金等于自动是一个不错的选择，但它有时不会垂直居中。

Answer 3

您可以使用css在现代浏览器（2dTransformCompatibility 3dTransformCompatibility）中执行此操作：

canvas {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Answer 4

这应该有用。

canvas { 
    display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
          align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
          justify-content: center;
    }

将画布放在屏幕中央

4 个答案: