如何使这个HTML5画布脚本全屏?

时间:2017-04-01 22:34:30

标签: javascript html css html5 css3

我无法尝试将画布设置为填满整个窗口。它目前设置为500x500 ..我是编码的新手,非常感谢任何帮助!谢谢。

以下是代码:

<!DOCTYPE html>
<html>
<head>
    <title>Starfield effect done in HTML 5</title>
    <script>
        window.onload = function() {

            /* --- config start --- */

            var starfieldCanvasId     = "starfieldCanvas", // id of the canvas to use
                framerate             = 60,                // frames per second this animation runs at (this is not exact)
                numberOfStarsModifier = 0.15,               // Number of stars, higher numbers have performance impact
                flightSpeed           = 0.003;              // speed of the flight, the higher this number the faster

            /* ---- config end ---- */

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                width         = canvas.width,
                height        = canvas.height,
                numberOfStars = width * height / 1000 * numberOfStarsModifier,
                dirX          = width / 2,
                dirY          = height / 2,
                stars         = [],
                TWO_PI        = Math.PI * 2;

            // initialize starfield
            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            // when mouse moves over canvas change middle point of animation
            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            // start tick at specified fps
            window.setInterval(tick, Math.floor(1000 / framerate));

            // main routine
            function tick() {
                var oldX,
                    oldY;

                // reset canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // save old status
                    oldX = stars[x].x;
                    oldY = stars[x].y;

                    // calculate changes to star
                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;

                    // if star is out of bounds, reset
                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }

                    // draw star
                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            // get a random number inside a range
            function range(start, end) {
                return Math.random() * (end - start) + start;
            }
        };
    </script>
</head>
<body style="background:#000;">
    <canvas width="500" height="500" id="starfieldCanvas"></canvas>
</body>
</html>

原始代码并归功于:https://www.timewasters-place.com/starfield-animation-done-in-html-5/

1 个答案:

答案 0 :(得分:1)

我认为您的意思是希望脚本自动确定屏幕大小,然后将画布设置为全屏而不是当前硬编码的500 x 500。

您可以使用以下方式以编程方式确定视口大小,其中宽度和高度分别如下所示。 (Source)

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

然后您可以按如下方式设置画布的尺寸:

canvas.width  = width;
canvas.height = height;

因此,这将是您案例中的完整代码:

<!DOCTYPE html>
<html>
<head>
    <title>Starfield effect done in HTML 5</title>
    <script>
        window.onload = function() {

            /* --- config start --- */

            var starfieldCanvasId     = "starfieldCanvas", // id of the canvas to use
                framerate             = 60,                // frames per second this animation runs at (this is not exact)
                numberOfStarsModifier = 0.15,               // Number of stars, higher numbers have performance impact
                flightSpeed           = 0.003;              // speed of the flight, the higher this number the faster

            var width = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;

            var height = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;

            /* ---- config end ---- */

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                stars         = [],
                TWO_PI        = Math.PI * 2;

                canvas.width  = width;
                canvas.height = height;

                numberOfStars = width * height / 1000 * numberOfStarsModifier;
                dirX          = width / 2;
                dirY          = height / 2;

            // initialize starfield
            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            // when mouse moves over canvas change middle point of animation
            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            // start tick at specified fps
            window.setInterval(tick, Math.floor(1000 / framerate));

            // main routine
            function tick() {
                var oldX,
                    oldY;

                // reset canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // save old status
                    oldX = stars[x].x;
                    oldY = stars[x].y;

                    // calculate changes to star
                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;

                    // if star is out of bounds, reset
                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }

                    // draw star
                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            // get a random number inside a range
            function range(start, end) {
                return Math.random() * (end - start) + start;
            }
        };
    </script>
</head>
<body style="background:#000;">
    <canvas id="starfieldCanvas"></canvas>
</body>
</html>

我也在小提琴上测试了这个。这是链接:Fiddle

希望这有帮助!如果有效,请告诉我。