HTML5 Canvas叹为观止的3D文字动效

每个字母由不同的图像数据构成，而且随着你的鼠标位置，呈现不同的立体视觉效果。感觉上像是被透明的蚕茧所包裹的文字。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var strokeColor = "rgba(255,255,255,0.1)";
var backgroundColor = "rgba(0,0,0,1)";
var vibrateFlag = false;

var canvas = document.getElementById("canvas");
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = strokeColor;

window.onresize = function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    camera.display.x = window.innerWidth / 2;
    camera.display.y = window.innerHeight / 2;
};

/* class */
var sphere = function(arg) {
    this.flag = true;
    this.type = "_";
    this.particleNum = arg.particleNum;
    this.center = {
        x: 0,
        y: 0,
        z: 0
    };
    this.targetCenter = arg.center;
    this.radius = 0;
    this.targetRadius = arg.radius;

this.degree = new Array();
    this.freeDegreeSpeed = new Array();
    for (var j = 0; j < this.particleNum; j++) {
        this.degree[j] = {
            theta: 0,
            phi: 0
        };
        this.freeDegreeSpeed[j] = {
            theta: 1 * Math.random() - 0.5,
            phi: 1 * Math.random() - 0.5
        };
    };
    this.charsMap = new Object();
    for (var i in chars) {
        var buffer = document.getElementById(i).getContext("2d").getImageData(0, 0, 100, 100).data;
        this.charsMap[i] = new Array();
        var self = this;
        for (var j = 0; j < this.particleNum; j++) {
            var redo = function() {
                var theta = Math.floor(Math.random() * 100);
                var phi = Math.floor(Math.random() * 100);
                if (buffer[(theta * 400 + (phi * 4))] == 0) {
                    self.charsMap[i].push({
                        theta: theta - 50 + 360 * Math.round(Math.random() * 2) - 1,
                        phi: phi - 50 + 360 * Math.round(Math.random() * 2) - 1
                    });
                } else {
                    redo();
                };
            };
            redo();
        };
    };
    this.charsMap["@"] = new Array();
    for (var i = 0; i < this.particleNum; i++) {
        this.charsMap["@"][i] = {
            theta: 360 * Math.random(),
            phi: 360 * Math.random()
        };
    };
    this.charsMap["_"] = new Array();
    for (var i = 0; i < this.particleNum; i++) {
        this.charsMap["_"][i] = {
            theta: 0,
            phi: 0
        };
    };

this.veticies = new Array();
    for (var i = 0; i < this.particleNum; i++) {
        this.veticies[i] = new vertex3d({});
    };
};
sphere.prototype = {
    update: function() {
        for (var i = 0; i < this.charsMap[this.type].length; i++) {
            if (this.degree[i].theta >= 30 && this.degree[i].phi >= 30) {
                this.flag = true;
                break;
            } else {
                this.flag = false;
            };
        };
        this.radius = this.radius + (this.targetRadius - this.radius) / 8;
        this.center.x = this.center.x + (this.targetCenter.x - this.center.x) / 8;
        this.center.y = this.center.y + (this.targetCenter.y - this.center.y) / 8;
        this.center.z = this.center.z + (this.targetCenter.z - this.center.z) / 8;
        for (var i = 0; i < this.charsMap[this.type].length; i++) {
            if (this.type === "@") {
                this.charsMap[this.type][i].theta += this.freeDegreeSpeed[i].theta;
                this.charsMap[this.type][i].phi += this.freeDegreeSpeed[i].phi;
            };
            this.degree[i].theta = this.degree[i].theta + (this.charsMap[this.type][i].theta - this.degree[i].theta) / (4 + 20 * Math.random());
            this.degree[i].phi = this.degree[i].phi + (this.charsMap[this.type][i].phi - this.degree[i].phi) / (4 + 20 * Math.random());
            if (vibrateFlag == true) {
                var getPosition = polarToRectangle(this.degree[i].theta + 90, this.degree[i].phi, this.radius + Math.random() * 10);
            } else {
                var getPosition = polarToRectangle(this.degree[i].theta + 90, this.degree[i].phi, this.radius);
            };
            this.veticies[i].affineIn.vertex = {
                x: getPosition.x,
                y: getPosition.y,
                z: getPosition.z
            };
            this.center.x
            this.veticies[i].affineIn.position = {
                x: this.center.x,
                y: this.center.y,
                z: this.center.z
            };
            this.veticies[i].vertexUpdate();
        };
    },
    draw: function() {
        if (this.flag == true) {
            ctx.beginPath();
            for (var i = 0; i < this.veticies.length; i++) {
                for (var j = i; j < this.veticies.length; j++) {

var distance =
                        (this.veticies[i].affineOut.x - this.veticies[j].affineOut.x) * (this.veticies[i].affineOut.x - this.veticies[j].affineOut.x) +
                        (this.veticies[i].affineOut.y - this.veticies[j].affineOut.y) * (this.veticies[i].affineOut.y - this.veticies[j].affineOut.y);

if (distance <= this.radius * 3) {
                        ctx.moveTo(
                            this.veticies[i].affineOut.x,
                            this.veticies[i].affineOut.y
                        );
                        ctx.lineTo(
                            this.veticies[j].affineOut.x,
                            this.veticies[j].affineOut.y
                        );
                    };
                };
            };
            ctx.closePath();
            ctx.stroke();
        };
    }
};
/* class */
var sphereNum = 20;
var s = new Array();
/*-----------------------------------------------------*/
var setup = function() {
    for (var i = 0; i < sphereNum; i++) {
        s[i] = new sphere({
            radius: 100,
            particleNum: 250,
            center: {
                x: 70 * i - (sphereNum - 1) * 70 / 2,
                y: 0,
                z: 0
            }
        });
    };
};
/*-----------------------------------------------------*/
var update = function() {
    for (var i = 0; i < sphereNum; i++) {
        s[i].update();
    };
};
/*-----------------------------------------------------*/
var draw = function() {
    for (var i = 0; i < sphereNum; i++) {
        s[i].draw();
    };
};

编译

CSS

HTML

每个字母由不同的图像数据构成，而且随着你的鼠标位置，呈现不同的立体视觉效果。感觉上像是被透明的蚕茧所包裹的文字。

编辑器支持Emmet

快捷键

每个字母由不同的图像数据构成，而且随着你的鼠标位置，呈现不同的立体视觉效果。 感觉上像是被透明的蚕茧所包裹的文字。

HTML5 Canvas 逼真的3D水体模拟动画

HTML5 Canvas 图片特效 - 3D波动网状纹理映射

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

每个字母由不同的图像数据构成，而且随着你的鼠标位置，呈现不同的立体视觉效果。感觉上像是被透明的蚕茧所包裹的文字。