javascript - 可能なすべてのサイズでキャンバス自体を自動調整します

Question

1つのWebサイトに背景として配置したい1つのcanvas-fxコード（「星」が深いところから前面に向かっていて、すべて中央に配置され、スペースナビゲーションをシミュレートしています。これは私が行ったものではありません）があります。

ユーザーがウィンドウのサイズを変更したとき（右または左にドラッグしたり、サイズを変更したりするなど）、星が常に中央から任意のサイズで来るように、またはデスクトップの解像度を変更するように、エフェクトが自動的に調整できるようにしたいと思います（I FXは、Webコードをレンダリングするときと同じように、それ自体で自動リセットできることを参照してください）。

また、コードが本文のコンテンツのサイズに合わせて調整できるようにする必要があります（つまり、コンテンツを上から下に追加するなど）。

最後に、右からスクロールバーだけを残して、下のバーを終了するにはどうすればよいですか？

これが私が使用している完全なコードです：

<!DOCTYPE html>
<html lang="es">

    <head>
        <meta charset="utf-8">
        <title>FX TEST</title>
        <STYLE type="text/css">
            html, body {
                width:100%;
                height:100%;
            }
            #Canvas2D {
                position:absolute;
                top:0;
                left:0;
            }
            #content {
                z-index: 10;
                position: relative;
            }
        </STYLE>
        <script language="JavaScript">
            function setup() {
                var fov = 150;
                var SCREEN_WIDTH = 1920;
                var SCREEN_HEIGHT = 1080;
                var HALF_WIDTH = SCREEN_WIDTH / 2;
                var HALF_HEIGHT = SCREEN_HEIGHT / 2;
                var numPoints = 300;

                function draw3Din2D(point3d) {
                    x3d = point3d[0];
                    y3d = point3d[1];
                    z3d = point3d[2];
                    var scale = fov / (fov + z3d);
                    var x2d = (x3d * scale) + HALF_WIDTH;
                    var y2d = (y3d * scale) + HALF_HEIGHT;
                    c.lineWidth = scale;
                    c.strokeStyle = "rgb(255,255,255)";
                    c.beginPath();
                    c.moveTo(x2d, y2d);
                    c.lineTo(x2d + scale, y2d);
                    c.stroke();
                }
                var canvas = document.getElementById('Canvas2D');
                var c = canvas.getContext('2d');
                var points = [];

                function initPoints() {
                    for(i = 0; i < numPoints; i++) {
                        point = [(Math.random() * 400) - 200, (Math.random() * 400) - 200, (Math.random() * 400) - 200];
                        points.push(point);
                    }
                }

                function render() {
                    c.fillStyle = "rgb(0,0,0)";
                    c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
                    for(i = 0; i < numPoints; i++) {
                        point3d = points[i];
                        z3d = point3d[2];
                        z3d -= 4;
                        if(z3d < -fov) z3d += 400;
                        point3d[2] = z3d;
                        draw3Din2D(point3d);
                    }
                }
                initPoints();
                var loop = setInterval(function () {
                    render();
                }, 50);
            }
        </script>
    </head>

    <body onload="setup();">
        <canvas id="Canvas2D" width="1920" height="1080">NOT USING HTML5 SUPPORT</canvas>
        <div id="content">
            <z-index: 0></z-index:>
        </div>
    </body>

</html>

score 3 · Accepted Answer

ライブデモ

フルスクリーンデモ

以下は、それを機能させるために私が行った変更です。まず、canvas要素のサイズを削除します。に変更します

<canvas id="Canvas2D"></canvas>

次に、キャンバスを使用してフルスクリーンで何かを行うときにCSSに使用するものを示します。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#Canvas2D {
    position:absolute;
    top:0;
    left:0;
}

そして、これがすべてを機能させるために必要なJSです

    // set the width and height to the full windows size
    var SCREEN_WIDTH = window.innerWidth;
    // Change to scroll height to make it the size of the document
    var SCREEN_HEIGHT = document.documentElement.scrollHeight;

    // Make sure to set the canvas to the screen height and width.
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;

// everytime we resize change the height and width to the window size, and reset the
// center point  
window.onresize = function () {
    SCREEN_HEIGHT = canvas.height = document.documentElement.scrollHeight;
    SCREEN_WIDTH = canvas.width = document.body.offsetWidth;    
    HALF_WIDTH = SCREEN_WIDTH / 2;
    HALF_HEIGHT = SCREEN_HEIGHT / 2;
};

score 1 · Accepted Answer

さて、まず第一に、あなたの内なるサポートのために@Loktarに感謝します。

今、私は自分の公式ウェブサイトに入れるコードに取り組んでいました（それを再起動します）。

@Loktarの助けを借りた後、問題は垂直方向の自動調整が機能していなかったため、これを変更しました：

var SCREEN_HEIGHT = document.documentElement.scrollHeight;

これに：

var SCREEN_HEIGHT = window.innerHeight;

そしてこれ：

SCREEN_HEIGHT = canvas.height = document.documentElement.scrollHeight;

これに変更：

SCREEN_HEIGHT = canvas.height = document.body.offsetHeight;

今では垂直方向にも良好な中心にあります。

2番目の問題は、canvasコマンドに正確なサイズのサイズを指定しないと、スクロールバーが表示されないことでした。そのため、このfxに追加した後、スクロールバーを水平方向に配置できるようになったスタイルコードに資金を提供します。垂直に。あなたがする必要があるのはあなたのウェブサイトのスタイルにこれを加えることです：

div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}

以下に示すように、クラスを使用してコンテンツのdivで呼び出した後の場合：

<div id="content" class="scroll">

これで、必要に応じてスクロールバーがアクティブになります。Internet ExplorerとFirefoxでテストされ、動作します。他のいくつかのキャンバスコードに適用するのに役立つことを願っています。

最後に、ここで私は最終的なコードがどのように見えるか、そして部分的にそれが私の公式ウェブサイトでどのように見えるかを残しました：

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8">

<title>FX TEST</title>




<STYLE type="text/css"> 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#Canvas2D {
    position:absolute;
    top:0;
    left:0;

}
#content {
    z-index: 10;
    position: relative;
}

div.scroll
{
width:100%;
height:100%;
overflow:scroll;
}
</STYLE> 


<script language="JavaScript">
function setup() {

    var fov = 150;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

    var HALF_WIDTH = SCREEN_WIDTH / 2;
    var HALF_HEIGHT = SCREEN_HEIGHT / 2;
    var numPoints = 300;

    function draw3Din2D(point3d) {
        x3d = point3d[0];
        y3d = point3d[1];
        z3d = point3d[2];
        var scale = fov / (fov + z3d);
        var x2d = (x3d * scale) + HALF_WIDTH;
        var y2d = (y3d * scale) + HALF_HEIGHT;

        c.lineWidth = scale;
        c.strokeStyle = "rgb(255,255,255)";
        c.beginPath();
        c.moveTo(x2d, y2d);
        c.lineTo(x2d + scale, y2d);
        c.stroke();

    }


    var canvas = document.getElementById('Canvas2D');
    var c = canvas.getContext('2d');

    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;

    var points = [];


    function initPoints() {
        for (i = 0; i < numPoints; i++) {
            point = [(Math.random() * 400) - 200, (Math.random() * 400) - 200, (Math.random() * 400) - 200];
            points.push(point);
        }

    }

    function render() {

        c.fillStyle = "rgb(0,0,0)";
        c.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);


        for (i = 0; i < numPoints; i++) {
            point3d = points[i];

            z3d = point3d[2];
            z3d -= 4;
            if (z3d < -fov) z3d += 400;
            point3d[2] = z3d;


            draw3Din2D(point3d);

        }
    }

    initPoints();

    var loop = setInterval(function () {
        render();
    }, 50);

    window.onresize = function () {
SCREEN_HEIGHT = canvas.height = document.body.offsetHeight;
    SCREEN_WIDTH = canvas.width = document.body.offsetWidth;
        HALF_WIDTH = SCREEN_WIDTH / 2;
        HALF_HEIGHT = SCREEN_HEIGHT / 2;
    };
}

setup();
</script>

</head>


<body onload="setup();">

<canvas id="Canvas2D"></canvas>


<div id="content" class="scroll">
<z-index: 0>





</z-index:>
</div>


</body>


</html>

score 0 · Accepted Answer

0

キャンバスの幅と高さを100％に設定します。

于 2013-03-26T18:31:01.823 に答える

javascript - 可能なすべてのサイズでキャンバス自体を自動調整します

3 に答える 3

ライブデモ

フルスクリーンデモ

Related

Reference