html5式程序猿表白

旧城等待， 2022-08-27 07:58 160阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

今天是个好日子，2014年5月20日，表白的最佳时机，虽说孩子已经四岁、结婚已经五年，但是也不可以偷懒，于是有了这个[效果][Link 1]。

水平有限，浏览器兼容不好，请大家使用chrome浏览器获得最佳效果。

\------------------------------------

[在线研究][Link 2]点这里，[下载收藏][Link 2]点这里.

\------------------------------------------------------

程序猿and程序媛，大胆秀出你的爱吧。利用html5 canvas实现动态的文字粒子效果，效果如下。

![SouthEast][]

![SouthEast 1][]

![SouthEast 2][]

![SouthEast 3][]

![SouthEast 4][]

实现原理

1. canvas里面实现描边文字

2. 利用getImageData获得描边文字的像素矩阵

3. 将粒子效果绑定在描边文字上

整个效果如下。

html文件非常简单。

css文件如下。

body {
    	background: #000;
    	text-align: center;
    	font-family: "simhei"
    }
    canvas {
    	margin: auto;
    	position: absolute;
    	left: 0;
    	right:0;
    	top: 0;
    	bottom: 0;
    }

js文件至关重要了。

BLUR = false;
     
    PULSATION = true;
    PULSATION_PERIOD = 1000;
    PARTICLE_RADIUS = 6;
     
    /* 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, 200, 350];
    QUALITY_TO_SCALE = [20, 6, 4, 1, 0.9, 0.5];
    QUALITY_TO_TEXT_POS = [10, 20, 40, 60, 170, 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 = 1000;
        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.strokeStyle = "black";
            tctx.fillStyle="#f00";
            tctx.strokeText(TEXT,20, 60);
            //tctx.fillText(TEXT,30, 50);
     
            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;
     
            ctx.fillStyle = BACKGROUND;
            ctx.fillRect(0, 0, W, H)
     
            if (BLENDING) ctx.globalCompositeOperation = "lighter";
     
            for (var i = 0; i < particles.length; i++) {
     
                p = particles[i];
    
                if (isNaN(p.x)) continue
     
                ctx.beginPath();
                ctx.fillStyle = "rgb(" + p.r + ", " + p.g + ", " + p.b + ")";
                ctx.fillStyle = "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.alpha + ")";
     
                if (BLINK) ctx.globalAlpha = Math.sin(Math.PI * mod * 1.0);
     
                if (PULSATION) { /* this would be 0 -> 1 */
                    var mod = ((GLOBAL_PULSATION ? 0 : p.deltaOffset) + now) % PULSATION_PERIOD / PULSATION_PERIOD;
                    mod = Math.sin(mod * Math.PI);
                } else var mod = 1;
     
                var offset = TREMBLING ? TREMBLING * (-1 + Math.random() * 2) : 0;
     
                var radius = PARTICLE_RADIUS * p.radius;
     
                if (!ARC) {
                    ctx.fillRect(offset + p.x - mod * radius / 2 | 0, offset + p.y - mod * radius / 2 | 0, radius * mod,
                        radius * mod);
                } else {
                    ctx.arc(offset + p.x | 0, offset + p.y | 0, radius * mod, Math.PI * 2, false);
                    ctx.fill();
                }
     
                p.x += (p.dx - p.x) / 10;
                p.y += (p.dy - p.y) / 10;
            }
        }
     
        function get_destinations() {
            for (var i = 0; i < particles.length; i++) {
                pa = particles[i];
                particles[i].alpha = 1;
                var distance = [];
                nearest_position = 0;
                if (positions.length) {
                    for (var n = 0; n < positions.length; n++) {
                        po = positions[n];
                        distance[n] = Math.sqrt((pa.x - po.x) * (pa.x - po.x) + (pa.y - po.y) * (pa.y - po.y));
                        if (n > 0) {
                            if (distance[n] <= distance[nearest_position]) {
                                nearest_position = n;
                            }
                        }
                    }
                    particles[i].dx = positions[nearest_position].x;
                    particles[i].dy = positions[nearest_position].y;
                    particles[i].distance = distance[nearest_position];
     
                    var po1 = positions[nearest_position];
                    for (var n = 0; n < positions.length; n++) {
                        var po2 = positions[n];
                        distance = Math.sqrt((po1.x - po2.x) * (po1.x - po2.x) + (po1.y - po2.y) * (po1.y - po2.y));
                        if (distance <= 5) {
                            positions.splice(n, 1);
                        }
                    }
                } else {
                    //particles[i].alpha = 0;
                }
            }
        }
     
        function init() {
            new_positions();
            setInterval(draw, 30);
            setInterval(new_positions, 2000);
        }
     
        init();
    };

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[Link 1]: http://skx.zjipc.cn/blog/love.html
[Link 2]: http://codepen.io/whqet/pen/sglAG
[SouthEast]: /images/20220824/6ad100978a904100a75ed2779fa332b6.png
[SouthEast 1]: /images/20220824/77c75d25ebf248ac826fa1ed3f15f1c3.png
[SouthEast 2]: /images/20220824/94b342c701b2468eaace89de67d5dd87.png
[SouthEast 3]: /images/20220824/f3910599394d410f86931ad588cb2a7a.png
[SouthEast 4]: /images/20220824/19bca0d6528544b8b431632f067daf34.png
[whqet]: http://blog.csdn.net/whqet