星星连线动弹动画（星座）

参考张鑫旭博客制作

canvas, star, constellation

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// 参考https://www.zhangxinxu.com/wordpress/2017/03/canvas-2d-cool-affect-skills-technology/
const _Math = {
    randInt: function(low, high) {
        return low + Math.floor(Math.random() * (high - low + 1));
    }
}

class Vector2 {
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
    }
}

// canvas构造器
class CanvasSystem {
    constructor(id) {
        this.canvas = undefined;
        this.context = undefined;
        this.timer = undefined
        if (id) this.init(id);
    }

init(id) {
        let container = document.getElementById(id);
        this.canvas = document.createElement('canvas');
        this.canvas.width = container.clientWidth;
        this.canvas.height = container.clientHeight;
        container.appendChild(this.canvas);
        this.context = this.canvas.getContext('2d');

// 绘制点默认居中
        this.context.setTransform(1, 0, 0, 1, this.canvas.width / 2, this.canvas.height / 2);
        return this;
    }

// 绘制图形
    draw(fun) {
        fun(this.context);
    }

// 更新图形
    update(fun) {
        let self = this;
        _update();

function _update() {
            self.timer = requestAnimationFrame(_update);
            fun(self.context);
        }
    }

stop() {
        cancelAnimationFrame(this.timer);
        console.warn('cancelAnimationFrame!');
    }

clear() {
        this.context.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
    }

fillRect(fillStyle) {
        this.context.fillStyle = fillStyle;
        this.context.fillRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
    }
}

// 绘制图形形状

class Star {
    constructor(x = 0, y = 0, r = 10) {
        this.position = new Vector2(x, y);
        this.radius = r;
    }

draw(ctx) {
        let star = this.getPoint(this.position.x, this.position.y, this.radius);

ctx.beginPath();
        ctx.moveTo(star[0][0], star[0][1]);
        ctx.lineTo(star[1][0], star[1][1]);
        ctx.lineTo(star[2][0], star[2][1]);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();

ctx.beginPath();
        ctx.moveTo(star[3][0], star[3][1]);
        ctx.lineTo(star[4][0], star[4][1]);
        ctx.lineTo(star[5][0], star[5][1]);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();
    }

getPoint(a = 0, b = 0, r = 8) {
        // 星星形状
        let starPos = [
            [a + r * Math.cos(0), b + r * Math.sin(0)],
            [a + r * Math.cos(Math.PI * 2 / 3), b + r * Math.sin(Math.PI * 2 / 3)],
            [a + r * Math.cos(Math.PI * 2 / -3), b + r * Math.sin(Math.PI * 2 / -3)],
            [a + r * Math.cos(Math.PI / 3), b + r * Math.sin(Math.PI / 3)],
            [a + r * Math.cos(Math.PI / -3), b + r * Math.sin(Math.PI / -3)],
            [a + r * Math.cos(Math.PI), b + r * Math.sin(Math.PI)]
        ];
        return starPos;
    }
}

let cs = new CanvasSystem('container');

// 文字canvas
let canvasText = document.getElementById('canvas');
let ctxText = canvasText.getContext('2d');
let gradient = ctxText.createLinearGradient(100, 100, 200, 0);
gradient.addColorStop(0.2, '#051cb5');
gradient.addColorStop(0.8, '#950062');
ctxText.font = '50px 微软雅黑 bold';
ctxText.textAlign = "center";
ctxText.textBaseline = "middle";
ctxText.fillStyle = gradient;
let shapeName = ['少女心座', '武神座', '霸道总裁座', '智多星座', '幸运星座', '文曲星座'];

let starsStore = [],
    linesStore = [];
let idx = 0,
    count = 0;

for (let i = 0; i < shapes.length; i++) {
    let stars = [],
        lines = [];

let shape = shapes[i];
    for (let j = 0; j < shape.pos.length; j++) {
        let shapePos = shape.pos[j];
        stars.push([shapePos[0] - graphW, shapePos[1] - graphH]);
    }
    for (let j = 0; j < shape.line.length; j++) {
        let shapeLine = shape.line[j];
        lines.push(shapeLine);
    }

starsStore.push(stars);
    linesStore.push(lines);
}
console.log(starsStore);

let moving = false; // 动画是否结束

let myStars = [],
    targetPos = [];
for (let i = 0; i < starsStore[0].length; i++) {
    myStars.push(new Star(0, 0, _Math.randInt(5, 10)));
}
console.log(myStars);

let stars = [];
let lines = [];

ctxText.fillText(shapeName[idx], 150, 50);
cs.update(render);

function render(ctx) {
    cs.clear();
    cs.fillRect('rgba(0,0,0,1)');

stars = starsStore[idx];
    lines = linesStore[idx];

let myStarsLength = myStars.length;
    let subLength = stars.length - myStarsLength;

// 当前星星个数小于下一波就添加，多余就移除。
    if (subLength > 0) {
        for (let i = 0; i < subLength; i++) {
            myStars.push(new Star(0, 0, _Math.randInt(5, 10)));
        }
    } else if (subLength < 0) {
        for (let i = 0; i < Math.abs(subLength); i++) {
            myStars.pop();
        }
    }

if (!moving) {
        count = 0;
        targetPos = [];
        for (let i = 0; i < stars.length; i++) {
            targetPos.push([stars[i][0], stars[i][1]]);
        }
    }

myStars.forEach((item) => {
        item.draw(ctx);
    });

lines.forEach((item) => {
        let point = item.split("-");
        ctx.beginPath();
        ctx.setLineDash([2, 2]);
        ctx.moveTo(myStars[point[0] - 1].position.x, myStars[point[0] - 1].position.y);
        ctx.lineTo(myStars[point[1] - 1].position.x, myStars[point[1] - 1].position.y);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#fff";
        ctx.stroke()
    });

// 开始动画
    if (!moving) {
        moving = true;
        targetPos.forEach((item, i) => {
            new TWEEN.Tween(myStars[i].position)
                .delay(0)
                .to({
                    x: item[0],
                    y: item[1]
                }, 2000)
                .easing(TWEEN.Easing.Elastic.Out)
                .onComplete(() => {
                    count++;
                    if (count === myStars.length) {
                        setTimeout(() => {
                            moving = false;
                            idx++;
                            if (idx > 5) idx = 0;
                            ctxText.clearRect(0, 0, 300, 100);
                            ctxText.fillText(shapeName[idx], 150, 50);
                        }, 1000);
                    }
                })
                .start();
        });
    }

TWEEN.update();
}

编译

CSS

HTML

参考张鑫旭博客制作

canvas, star, constellation

编辑器支持Emmet

快捷键

参考张鑫旭博客制作

canvas, star, constellation

HTML5 Canvas线条被重力（引力）所吸引的动画

html5 canvas 光速星际旅行动画（粒子特效）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：