CANVAS 彩虹流星雨动画

canvas rainbow rain animation

CANVAS, rain

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2873
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var cvs = document.getElementsByTagName("canvas")[0];
    var ctx = cvs.getContext('2d');

cvs.width = window.innerWidth;
    cvs.height = window.innerHeight * 2;

var maxHeight = 40;
    var minHeight = 20;
    var maxSpeed = 4;
    var minSpeed = 2;
    var colors = ["#F8FFE5", "#06D6A0", "#1B9AAA", "#EF476F", "#FFC43D"];
    var amount = 30;
    var lines = [];
    var fast = false;

function load() {
        var x = 0;
        var y = 0;
        var color;
        var width;
        var height;
        var speed;
        var handle = [];
        for (var i = 0; i < amount; i++) {
            x = (Math.random() * cvs.width) + 0;
            y = (Math.random() * cvs.height) + 0;
            color = Math.floor((Math.random() * colors.length) + 0);
            height = (Math.random() * maxHeight) + 0;
            speed = (Math.random() * maxSpeed) + minSpeed;
            width = height / 10;

handle[0] = x;
            handle[1] = y;
            handle[2] = width;
            handle[3] = height;
            handle[4] = colors[color];
            handle[5] = speed;
            handle[6] = fast;

lines.push(handle);

handle = [];
            color = 0;
        }
    }

function update() {
        for (var i = 0; i < amount; i++) {
            lines[i][1] += lines[i][5];

if (lines[i][1] > cvs.height) {
                lines[i][1] = -lines[i][3];
                lines[i][0] = (Math.random() * cvs.width) + 0;
                lines[i][5] = lines[i][5] / 5;
                lines[i][6] = false;
            }
            if (lines[i][1] > cvs.height / 2 && !lines[i][6]) {
                lines[i][5] = lines[i][5] * 5;
                lines[i][6] = true;
            }
        }
    }

function render() {
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        var multi = 2;
        for (var i = 0; i < amount; i++) {
            ctx.fillStyle = lines[i][4];
            ctx.fillRect(lines[i][0], lines[i][1], lines[i][2], lines[i][3]);
            ctx.beginPath();
            ctx.arc(lines[i][0] + lines[i][2] / 2, lines[i][1] - lines[i][2] / 3, lines[i][2] / 2, 0, 2 * Math.PI);
            ctx.arc(lines[i][0] + lines[i][2] / 2, lines[i][1] + lines[i][3], lines[i][2] / 2, 0, 2 * Math.PI);
            ctx.fill();
            var grd = grd = ctx.createLinearGradient(lines[i][0], lines[i][1] - lines[i][3] * multi, lines[i][0], lines[i][1]);
            grd.addColorStop(0, "#121212");
            grd.addColorStop(1, lines[i][4]);
            ctx.fillStyle = grd;
            ctx.fillRect(lines[i][0], lines[i][1] - lines[i][3] * multi, lines[i][2], lines[i][3] * multi);

}
    }

load();

setInterval(render, 10);
    setInterval(update, 10);

var finished = true;
    $(document).bind('mousewheel', function(e) {
        if (finished) {
            var delta = e.originalEvent.wheelDelta;
            var body = $("html, body");

if (delta < 0) {
                body.stop().animate({
                    scrollTop: 1100
                }, '500', 'swing');
                $(".left-slide").css("transform", "translateX(-150px)");
                $(".right-slide").css("transform", "translateX(150px)");

}
            if (delta > 0) {
                body.stop().animate({
                    scrollTop: 0
                }, '500', 'swing');
                $(".left-slide").css("transform", "translateX(0px)");
                $(".right-slide").css("transform", "translateX(0px)");
            }
            finished = false;
            setTimeout(function() {
                finished = true;
            }, 500);
        }

});

编译

CSS

HTML

canvas rainbow rain animation

CANVAS, rain

编辑器支持Emmet

快捷键

canvas rainbow rain animation

CANVAS, rain

CANVAS 彩虹色字符雨动画

CANVAS 占星符号动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：