2

我有一个 canvas-fx 代码（“星星”从深到前，全部居中，模拟空间导航；这不是我做的），我想把它放在一个网站中作为背景。

我想要它，以便当用户调整窗口大小（向右或向左或调整大小或其他）时，效果可以自动调整，以便星星总是以任何大小从中心出现，甚至改变桌面分辨率（我参考 FX 可以自动重置，就像渲染 webcode 时一样）。

我也想要它，以便代码可以根据正文内容的大小自行调整（即从上到下添加内容等）。

最后，我怎样才能退出底部栏，只留下右边的滚动条？

这是我正在使用的完整代码：

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

3 回答 3

3

现场演示

全屏演示

以下是我为使其正常工作所做的修改。首先删除画布元素中的大小。将其更改为

<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;
};
于 2013-03-26T18:35:31.500 回答
1

好吧，首先，非常感谢 @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;

现在它垂直居中也很好。

第二个问题是，当你没有给画布命令一个确切的大小时它不会显示滚动条，所以我资助了一个样式代码，在我适应这个 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>
于 2013-03-28T14:22:05.313 回答
0

将画布的宽度和高度设置为 100%。

于 2013-03-26T18:31:01.823 回答