文字粒子表白效果代码

代码语言:html

所属分类:表白

代码描述:文字粒子表白效果代码

代码标签: 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>

<body style="background-color: rgb(0, 0, 0);">

    <script type="text/javascript">
        BLUR = false;

        PULSATION = true;
        PULSATION_PERIOD = 600;
        PARTICLE_RADIUS = 4;

        /* disable blur before using blink */

        BLINK = false;

        GLOBAL_PULSATION = false;

        QUALITY = 2; /* 0 - 5 */

        /* set false if you prefer rectangles */
        ARC = true;

        /* trembling + blur = fun */
        TREMBLING = 0; /* 0 - infinity */

        FANCY_FONT = "Arial";

        BACKGROUND = "#000";

        BLENDING = true;

        /* if empty the text will be a random number */
        var TEXT;
        num = 0;
        TEXTArray = ["王子", "深爱", "公主", "直到", "永远"];

        QUALITY_TO_FONT_SIZE = [10, 12, 40, 50, 100, 350];
        QUALITY_TO_SCALE = [20, 6, 4, 2, 0.9, 0.5];
        QUALITY_TO_TEXT_POS = [10, 20, 60, 100, 370, 280];


        window.onload = function () {
            document.body.style.backgroundColor = BACKGROUND;

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var W = canvas.width;
            var H = canvas.height;

            var tcanvas = document.createElement("canvas");
            var tctx = tcanvas.getContext("2d");
            tcanvas.width = W;
            tcanvas.height = H;

            total_area = W * H;
            total_particles = 928;
            single_particle_area = total_area / total_particles;
            area_length = Math.sqrt(single_particle_area);

            var particles = [];
            for (var i = 1; i <= total_particles; i++) {
                particles.push(new particle(i));
            }

            function particle(i) {
                this.r = Math.round(Math.random() * 255 | 0);
                this.g = Math.round(Math.random() * 255 | 0);
                this.b = Math.round(Math.random() * 255 | 0);
                this.alpha = 1;

                this.x = (i * area_length) % W;
                this.y = (i * area_length) / W * area_length;

                /* randomize delta to make particles sparkling */
                this.deltaOffset = Math.random() * PULSATION_PERIOD | 0;

                this.radius = 0.1 + Math.random() * 2;
            }

            var positions = [];

            function new_positions() {

                TEXT = TEXTArray[num];

                if (num < TEXTArray.length - 1) {
                    num++;
                } else {
                    num = 0;
                }
                //alert(TEXT);

                tctx.fillSt.........完整代码请登录后点击上方下载按钮下载查看

网友评论0