以所有可能的尺寸自动调整画布答案

【问题标题】：Auto-adjust canvas by itself in all possible sizes以所有可能的尺寸自动调整画布
【发布时间】：2013-03-28 22:22:05
【问题描述】：

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

我希望当用户调整窗口大小（向右或向左或调整大小或其他）时，效果可以自动调整，以便星星始终以任何大小从中心出现，甚至改变桌面分辨率（我指的是 FX 可以自动重置，就像渲染网页代码时一样）。

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

最后，如何退出底部栏，只留下右边的滚动条？

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

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

【问题讨论】：

标签： javascript css html canvas size

【解决方案1】：

Live Demo

Full screen demo

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

<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;
};

【讨论】：

将宽度和高度也添加到 100%，看起来很棒。 #Canvas2D { position:absolute; top:0; left:0; height:100%; width:100%; }
@Loktar 你的回答对我帮助很大，但它只显示直到一个分辨率，超过它，它停止绘图，我指的是使用 1920x1080，不会在屏幕上完全绘制。 MiniRagnarok 的回答对我没有帮助。提前致谢。
@EHPDJFRANKY 嗯.. 我对你的意思感到困惑。所以它不会在整个屏幕上显示它？即使使用此链接fiddle.jshell.net/loktar/nr8jr/show/light ？我想不出它不会的原因。
@Loktar 抱歉，显示非常好，发生的情况是，当我第一次渲染时，我的最后一个 IE 窗口以很小的尺寸关闭，然后我手动调整大小，它不适合，我需要按f5。在反向模式下，它不会发生。
@Lokstar 另一个问题是向正文添加内容时无法向下滚动。无论如何，非常感谢您的回答和时间。

【解决方案2】：

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

现在它垂直居中也很好。

第二个问题是，当你没有给 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>

【讨论】：

【解决方案3】：

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

【讨论】：

非常感谢，但是。这对我没有帮助。
所以你说，问题不在于使画布适合，它是你不知道如何将画布的大小恢复到 javascript 中。