Poniżej znajduje się mój kod, aby wyświetlić płótno na obrazie tła:

<!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>

Ale zanim wyświetli się na płótnie na środku strony internetowej, zostanie wyświetlony jak poniżej:

enter image description here

Zamiast na środku strony internetowej.

Twój komentarz Witamy.

1
arachide 12 sierpień 2014, 12:58

4 odpowiedzi

Najlepsza odpowiedź

Możesz to zrobić w nowoczesnej przeglądarce (2dtransformompatifility 3DTransformompatility) z CSS:

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%);
}
1
Engin Üstün 12 sierpień 2014, 09:37
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
}

Powinienem to zrobić.

1
Michael Schneider 12 sierpień 2014, 09:01

W przypadku centrowania strony internetowej można obliczyć różnicę między wielkością ciała a wielkości płótna. Np

Diffeight = (BodyHeight-Canavasheight) // Różnica w wysokości Difwesth = (borywidth-Canvaswidth) // Różnica w szerokości

Następnie możesz umieścić swój brzeg lewy równy do połowy różnorodności i marginesu, równa się do połowy diffeight.

Ustawianie marginesu równa się Auto to dobra opcja, ale czasami nie wyśrodkuje pionowo.

1
AZT 12 sierpień 2014, 09:25

To powinno działać.

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;
    }
0
Nischaal Cooray 12 sierpień 2014, 09:01