[JavaScript知识库]很哇塞的网页特效之动态线条文字

????????本篇分享的动态线条文字特效通过Javascript进行canvas绘画实现。能够在文字范围内动态的随机生成散点。短距离散点之间进行连线，散点在文字范围内随机方向运动，产生动画效果。如下图所示：

? ? ? ? ?上图效果是散点数量递增时的效果，散点数越多越能清晰的分辨出文字。

? ? ? ? 主要步骤有

? ? ? ? 1、使用黑色背景白色前景在画布上书写文字，并将画板数据保存起来。

 ctx.beginPath();
 ctx.fillStyle = "#000";    //背景色                        
 ctx.rect(0, 0, canvas.width, canvas.height);
 ctx.fill();
 ctx.textAlign = "left";
 ctx.fillStyle = "#fff";    //前景色
 ctx.fillText(str, 0, 320);
 ctx.closePath();

 mask = ctx.getImageData(0, 0, canvas.width, canvas.height);  //保存的画板数据

? ? ? ? 2、抽样保存文字范围内的像素点。从上一步保存的数据中抽样保存颜色为白色的像素点：

for (var i = 0; i < mask.data.length; i += 16) {
    if (mask.data[i] == 255 && mask.data[i + 1] == 255 && mask.data[i + 2] == 255 && mask.data[i + 3] == 255) {
        whitePixels.push([iToX(i, mask.width), iToY(i, mask.width)]);
    }
}

? ? ? ? 画板数据mask中每4元素表示一个像素点分别记录(R、G、B、A)。

????????i+=16?表示每隔4个点采样保存一个点，没有必要全部点都保存起来。

? ? ? ? iToX(i,width)和iToY(i,width)两个方法将数组下标i转换为平面坐标系的x,y值，便于后续散点进行运动时改变位置。

????????3、随机生成用于显示的散点数组。从上一步保存的白色像素点素组中随机抽取想要数量的点：

var spawn = whitePixels[Math.floor(Math.random() * whitePixels.length)];
var p = new point(spawn[0], spawn[1], Math.floor(Math.random() * 2 - 1), Math.floor(Math.random() * 2 - 1));
points.push(p);

? ? ? ? 随机抽取的点被保存为{x,y,vx,vy}的形式，方便后续动画时进行移动。

    var point = function (x, y, vx, vy) {
            this.x = x;             //x坐标
            this.y = y;             //y坐标
            this.vx = vx || 1;      //每次运动的x方向偏移量
            this.vy = vy || 1;      //每次运动的y方向偏移量
        }

????????4、设置计时器进行散点的位移和散点之间的连线。

point.prototype.update = function () {

    //当前点与其他点连线
    for (var k = 0, m = points.length; k < m; k++) {
        if (points[k] === this) continue;
        var d = Math.sqrt(Math.pow(this.x - points[k].x, 2) + Math.pow(this.y - points[k].y, 2));
        if (d > 5 && d < 20) {
            ctx.lineWidth = .2;
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);    
            ctx.lineTo(points[k].x, points[k].y);
            ctx.stroke();
        }
    }


    var isOverBorder = this.x + this.vx >= canvas.width || this.x + this.vx < 0 || mask.data[coordsToI(this.x + this.vx, this.y, mask.width)] != 255;
    isOverBorder = isOverBorder || this.y + this.vy >= canvas.height || this.y + this.vy < 0 || mask.data[coordsToI(this.x, this.y + this.vy, mask.width)] != 255;
    if (isOverBorder) {    //如果点的运动轨迹即将超出字符范围，则点的运动方向反向。
        this.vx *= -1;
        this.x += this.vx * 2;
        this.vy *= -1;
        this.y += this.vy * 2;
    } else {               //否则继续沿原来方向移动。
        this.x += this.vx;
        this.y += this.vy;
    }
}

function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var k = 0, m = points.length; k < m; k++) {
        points[k].update();
    }
}

setInterval(loop, 50);

? ? ? ? ? 可以自定义定时器定时评率和显示的散点数量调整显示效果。很多博客页面背景的随机散点和连线特效也可以参考本篇方式实现。

? ? ? ? 代码下载：很哇塞的网页特效之动态线条文字源代码-网页制作文档类资源-CSDN下载通过canvas绘画实现的网页动态线条文字特效。特效介绍页面：https://blog.csdn.更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/evanyanglibo/45701242