文字粒子表白效果代码-html代码-BFW代码库

文字粒子表白效果代码

代码语言：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.fillStyle = "white";
                tctx.fillRect(0, 0, W, H)
                //tctx.fill();

                tctx.font = "bold " + QUALITY_TO_FONT_SIZE[QUALITY] + "px " + FANCY_FONT;

                //tctx.textAlign='center';//文本水平对齐方式
                //tctx.textBaseline='middle';

                //tctx.strokeStyle = "black";
                tctx.fillStyle = "#f00";
                //tctx.strokeText(TEXT,30, 50);
                tctx.fillText(TEXT, 20, 60);

                image_data = tctx.getImageData(0, 0, W, H);
                pixels = image_data.data;
                positions = [];
                for (var i = 0; i < pixels.length; i = i + 2) {
                    if (pixels[i] != 255) {
                        position = {
                            x: (i / 2 % W | 0) * QUALITY_TO_SCALE[QUALITY] | 0,
                            y: (i / 2 / W | 0) * QUALITY_TO_SCALE[QUALITY] | 0
                        }
                        positions.push(position);
                    }
                }

                get_destinations();
            }

            function draw() {

                var now = Date.now();

                ctx.globalCompositeOperation = "source-over";

                if (BLUR) ctx.globalAlpha = 0.1;
                else if (!BLUR && !BLINK) ctx.globalAlpha = 1.0;

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