Canvas Background Dark Night Html Css Js

M.b.patel June 09, 2021

Canvas Background Dark Night Html Css Js

Demo 1

Demo 2

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Background Dark Night Html Css Js</title>
    <style>
        body {
		  background: #060e1b;
		  overflow: hidden;
		}

        canvas {
                opacity: 0.9;
                position:absolute;
                top:0;
                left:0;
                }
        H1{
            color: rgb(255, 255, 255);
            font-size: 80px;
            text-align: center;
            
        }
    </style>
</head>
<body>
    <h1>HTML VS CSS</h1>
    <canvas id="canvas">
    </canvas>
</body>
<script>
    function fn() {
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
                        window.setTimeout(callback, 1000 / 60);
                    }
        })();
        var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 1200;
        var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.025, '#fff');
        gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addColorStop(1, 'transparent');
        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();
        function random(min, max) {
            if (arguments.length < 2) {
                max = min;
                min = 0
            }
            if (min > max) {
                var hold = max;
                max = min;
                min = hold
            }
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        function maxOrbit(x, y) {
            var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max));
            return diameter / 2
        }

        var Star = function () {
            this.orbitRadius = random(maxOrbit(w, h));
            this.radius = random(60, this.orbitRadius) / 12;
            this.orbitX = w / 2;
            this.orbitY = h / 2;
            this.timePassed = random(0, maxStars);
            this.speed = random(this.orbitRadius) / 900000;
            this.alpha = random(2, 10) / 10;
            count++;
            stars[count] = this
        };
        Star.prototype.draw = function () {
            var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10);
            if (twinkle === 1 && this.alpha > 0) {
                this.alpha -= 0.05
            } else if (twinkle === 2 && this.alpha < 1) {
                this.alpha += 0.05
            }
            ctx.globalAlpha = this.alpha;
            ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
            this.timePassed += this.speed
        };
        for (var i = 0; i < maxStars; i++) {
            new Star()
        }
        function animation() {
            ctx.globalCompositeOperation = 'source-over';
            ctx.globalAlpha = 0.8;
            ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = 'lighter';
            for (var i = 1, l = stars.length; i < l; i++) {
                stars[i].draw()
            }
            ;
            window.requestAnimationFrame(animation)
        }

        animation();
    }
    fn();
</script>
</html>

Black Mode Javascript Is Often Executed After Css, So This Approach Is Prone To A “flash Of With A Night Shadow On A Dark Background Css: #canvas-wrapper .dark-mode { Background: #222; Color: #ddd; }

Simple Canvas With Text, To Change Between Dark Mode

With Systems, You Can Encode Predictable Background, Text, Border Whether On A Sketch Canvas Or Lengthy Kitchen Sink Html Page, Stacked Your To Create A System For Light & Dark, You Must Model The Range Of CSS.

Canvas Background Design
Canvas Background Image
Canvas Background Template
Canvas Background Html,css Design

How To Use This Cord

steps

Fast one copy HTML file.
copy CSS file and past head part top fo HTML file.
copy js cord and past HTML file body in site last.
file save name.html
ran HTML file
Canvas Background Design
Is ready to use
Ran Index.html

AdonisJS Authentication Tutorial: Set Up a Basic Project with CLI | Adonisjs authentication example

Canvas Background Dark Night Html Css Js

Canvas Background Dark Night Html Css Js

How To Use This Cord

Post a Comment

analytics

Popular Posts

Login Page Section Html And Css Black And Red Color

laravel request array validation |validate array of objects | validate array without keys | tips Message Validation rule requires at least 2 parameters

[NEW] Effortless User Registration with Laravel, Vue.js, and Axios: A Comprehensive Guide

Product Card Design Cards Css

Email template business | email template business proposal | html email templates for gmail

Labels

Most Recent

About Us

Follow Us

Footer Copyright

Contact form

Canvas Background Dark Night Html Css Js

Canvas Background Dark Night Html Css Js

How To Use This Cord

You may like these posts

Post a Comment

Contact form