0

私はしばらくこれに苦労してきました。皆さんが助けてくれることを願っています。中央に配置することを拒否しているキャンバスのサイズに基づいてグリッドを描画する、動的にサイズ変更されたキャンバスがあります。このサイトの多くの提案を試しましたが、それらはすべて固定幅のキャンバスに適用されるようです。これは私にはうまくいきません..

ここにすべてのコードがあるので、私が行っていることをすべて見ることができます..キャンバスとコンテンツの動的なサイズ変更を行うために mootools を使用しています。誰もが知っているムーツールなしでサイズを変更する方法があれば、それも素晴らしいでしょう。

ありがとう！

HTML

<!doctype html>
<html>
        <LINK href="style.css" rel="stylesheet" type="text/css">
<head>
<meta charset="utf-8">
        <script type='text/javascript' src='https://my-youtube.googlecode.com/files/mootools-core-1.4.2-full-nocompat.js'></script>
        <script type='text/javascript' src="chessboard.js"></script>
<title>Untitled Document</title>
</head>

<body>

<div id="header"></div>
<div id="content">
    <canvas id="canvas">TEST</canvas>
</div>

<div id="footer"></div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

#header {
    margin-top: 0px;
    height: 75px;
    width: 100%;
    background: url(images/logo1.png) no-repeat top center;
}

#content {
    width: 100%;
    height: 100%-75px;
}

#footer {

}

body, html {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    background-color: #a6a6a6;
    background-image: url(images/background_image3.jpg);
    background-repeat: repeat-x;
    height: 100%;
}

Javascript

window.addEvent('load', function() {
(function() {
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

// resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.height = window.innerHeight-100;
        canvas.width = canvas.height;

        drawStuff();
    }

resizeCanvas();

    function drawStuff() {

        var width = canvas.height/8;
        var baseX = 0.5, baseY = 0.5;


// draws the 8 by 8 chessboard
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 8; j++) {
                var x = baseX + width * i, y = baseY + width * j;
                context.strokeRect(x, y, width, width);
                if ((i + j) % 2 != 0) {
                    context.fillStyle = '#BA1A1A';
                    context.fillRect(x, y, width, width);
                }
                if ((i + j) % 2 == 0) {
                    context.fillStyle = 'E6A3A3';
                    context.fillRect(x, y, width, width);
                }
            }
        }
    }
})();
});
4

1 に答える 1

2

この質問の答えのおかげで、私はそれを理解しました: Centering a div block without the width

display: inline block;つまり、div コンテナーの CSSで使用します。次にtext-align: center;、その div の親コンテナーで使用します。

だから、私の場合：

#content {
    margin: 0 auto;
    text-align: left;
    background-color: black;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

body, html {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    background-color: #a6a6a6;
    background-image: url(images/background_image3.jpg);
    background-repeat: repeat-x;
    height: 100%;
    text-align:center;
}
于 2012-08-19T22:57:31.007 に答える