Canvas 3D球形文字云动画特效

<!doctype html>

<html>

<head>

<title>Canvas 3D球形文字云动画特效</title>

<style>

body {

color:#555555;

}

h4 {

font-family:sans-serif;

color:#555555;

font-size:16px;

}

h3 {

font-family:sans-serif;

color:#555555;

}

p {

font-family:sans-serif;

color:#888888;

font-size:14px;

}

a {

font-family:sans-serif;

color:#d15423;

text-decoration:none;

}

</style>

</head>

<body>

</div>

window.addEventListener("load", windowLoadHandler, false);

var sphereRad = 280;

var radius_sp=1;

var opt_display_dots = false;

var unicodeFlakes = [\'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'我\', \'蒌\', \'火\', \'的\', \'山\', \'首\', \'页\', \'嫖\', \'是\', \'肺\', \'化\', \'?\', \'化\', \'?\', \'符\', \'?\', \'是\', \'原\', \'子\', \'序\', \'?\', \'是\', \'它\', \'是\', \'肺\', \'灰\', \'白\', \'色\', \'?\', \'金\', \'?\', \'有\', \'光\', \'?\', \'冱\', \'硬\', \'?\', \'於\', \'碳\', \'族\', \'化\', \'?\', \'性\', \'冱\', \'陪\', \'同\', \'族\', \'的\', \'遽\', \'陪\', \'矽\', \'相\', \'共\', \'有\', \'五\', \'肺\', \'同\', \'位\', \'素\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'?\', \'才\', \'菜\', \'参\', \'餐\', \'层\', \'茶\', \'差\', \'长\', \'常\', \'场\', \'唱\', \'超\', \'车\', \'成\', \'城\', \'程\', \'吃\', \'店\', \'定\', \'订\', \'丢\', \'东\', \'冬\', \'懂\', \'动\', \'都\', \'读\', \'独\', \'度\', \'短\', \'对\', \'多\', \'饿\', \'儿\', \'而\', \'发\', \'法\', \'反\', \'饭\', \'方\', \'房\', \'放\', \'飞\', \'非\', \'费\', \'分\', \'份\', \'风\', \'封\', \'夫\', \'服\', \'附\', \'父\', \'复\', \'该\', \'改\', \'干\', \'感\', \'刚\', \'高\', \'告\', \'哥\', \'歌\', \'格\', \'个\', \'给\', \'号\', \'喝\', \'和\', \'河\', \'贺\', \'黑\', \'很\', \'红\', \'后\', \'候\', \'湖\', \'护\', \'花\', \'化\', \'画\', \'话\', \'坏\', \'欢\', \'还\', \'换\', \'黄\', \'回\', \'会\', \'婚\', \'活\', \'火\', \'或\', \'机\', \'鸡\', \'级\', \'极\', \'急\', \'际\', \'济\', \'继\', \'寄\', \'加\', \'家\', \'假\', \'价\', \'力\', \'历\', \'丽\', \'联\', \'凉\', \'两\', \'亮\', \'谅\', \'辆\', \'了\', \'林\', \'零\', \'六\', \'楼\', \'路\', \'录\', \'旅\', \'妈\', \'马\', \'码\', \'吗\', \'买\', \'卖\', \'满\', \'慢\', \'忙\', \'猫\', \'毛\', \'贸\', \'么\', \'没\', \'每\', \'美\', \'妹\', \'米\', \'面\', \'民\', \'明\', \'末\', \'母\', \'目\', \'拿\', \'哪\', \'那\', \'奶\', \'男\', \'南\', \'难\', \'脑\', \'呢\', \'能\', \'你\', \'年\', \'念\', \'鸟\', \'您\', \'牛\', \'农\', \'努\', \'女\', \'暖\', \'欧\', \'怕\', \'乓\', \'旁\', \'胖\', \'跑\', \'朋\', \'片\', \'漂\', \'票\', \'乒\', \'平\', \'期\', \'其\', \'奇\', \'骑\', \'起\', \'气\', \'汽\', \'千\', \'前\', \'签\', \'轻\', \'清\', \'情\', \'请\', \'秋\', \'球\', \'区\', \'取\', \'去\', \'趣\', \'全\', \'然\', \'让\', \'首\', \'售\', \'书\', \'术\', \'树\', \'双\', \'谁\', \'水\', \'睡\', \'说\', \'司\', \'思\', \'死\', \'四\', \'送\', \'诉\', \'算\', \'虽\', \'岁\', \'孙\', \'所\', \'他\', \'她\', \'它\', \'台\', \'太\', \'谈\', \'汤\', \'堂\', \'套\', \'特\', \'踢\', \'提\', \'题\', \'体\', \'天\', \'填\', \'条\', \'铁\', \'听\', \'厅\', \'庭\', \'通\', \'同\', \'头\', \'图\', \'外\', \'玩\', \'完\', \'晚\', \'万\', \'王\', \'网\', \'往\', \'忘\', \'望\', \'卫\', \'为\', \'位\', \'文\', \'我\', \'卧\', \'五\', \'午\', \'务\', \'物\', \'西\', \'吸\', \'希\', \'息\', \'习\', \'牙\', \'亚\', \'烟\', \'言\', \'羊\', \'阳\', \'样\', \'药\', \'要\', \'也\', \'业\', \'夜\', \'一\', \'衣\', \'医\', \'已\', \'以\', \'易\', \'意\', \'因\', \'音\', \'印\', \'银\', \'应\', \'英\', \'影\', \'硬\', \'用\', \'邮\', \'油\', \'游\', \'友\', \'有\', \'又\', \'右\', \'鱼\', \'愉\', \'雨\', \'语\', \'元\', \'员\', \'园\', \'原\', \'远\', \'院\', \'愿\', \'月\', \'在\', \'早\', \'怎\', \'张\', \'找\', \'照\', \'者\', \'这\', \'真\', \'正\', \'证\', \'知\', \'只\', \'之\', \'直\', \'止\', \'纸\', \'至\', \'治\', \'中\', \'钟\', \'种\', \'重\', \'周\', \'洲\', \'主\', \'住\', \'助\', \'祝\', \'注\', \'专\', \'准\' ];

//for debug messages

var Debugger = function() { };

Debugger.log = function(message) {

try {

console.log(message);

}

catch (exception) {

return;

}

function windowLoadHandler() {

canvasApp();

}

function canvasSupport() {

return Modernizr.canvas;

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

var displayWidth;

var displayHeight;

var timer;

var wait;

var count;

var numToAddEachFrame;

var particleList;

var recycleBin;

var particleAlpha;

var r,g,b;

var fLen;

var m;

var projCenterX;

var projCenterY;

var zMax;

var turnAngle;

var turnSpeed;

var sphereCenterX, sphereCenterY, sphereCenterZ;

var particleRad;

var zeroAlphaDepth;

var randAccelX, randAccelY, randAccelZ;

var gravity;

var rgbString;

//we are defining a lot of variables used in the screen update functions globally so that they don\'t have to be redefined every frame.

var p;

var outsideTest;

var nextParticle;

var sinAngle;

var cosAngle;

var rotX, rotZ;

var depthAlphaFactor;

var i;

var theta, phi;

var x0, y0, z0;

init();

// INITIALLI

function init() {

wait = 1;

count = wait - 1;

numToAddEachFrame = 4;

//particle color

r = 70;

g = 255;

b = 140;

rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.

particleAlpha = 1; //maximum alpha

displayWidth = theCanvas.width;

displayHeight = theCanvas.height;

fLen = 320; //represents the distance from the viewer to z=0 depth.

//projection center coordinates sets location of origin

projCenterX = displayWidth/2;

projCenterY = displayHeight/2;

//we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).

zMax = fLen-2;

particleList = {};

recycleBin = {};

//random acceleration factors - causes some random motion

randAccelX = 0.1;

randAccelY = 0.1;

randAccelZ = 0.1;

gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.

particleRad = 2.5;

sphereCenterX = 0;

sphereCenterY = 0;

sphereCenterZ = -3 - sphereRad;

//alpha values will lessen as particles move further back, causing depth-based darkening:

zeroAlphaDepth = -750;

turnSpeed = 2*Math.PI/1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames).

turnAngle = 0; //initial angle

timer = setInterval(onTimer, 10/24);

}

function onTimer() {

//if enough time has elapsed, we will add new particles.

count++;

if (count >= wait) {

count = 0;

for (i = 0; i < numToAddEachFrame; i++) {

theta = Math.random()*2*Math.PI;

phi = Math.acos(Math.random()*2-1);

x0 = sphereRad*Math.sin(phi)*Math.cos(theta);

y0 = sphereRad*Math.sin(phi)*Math.sin(theta);

z0 = sphereRad*Math.cos(phi);

//We use the addParticle function to add a new particle. The parameters set the position and velocity components.

//Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after

//it becomes unstuck).

var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002*x0, 0.002*y0, 0.002*z0);

//we set some "envelope" parameters which will control the evolving alpha of the particles.

p.attack = 50;

p.hold = 50;

p.decay = 100;

p.initValue = 0;

p.holdValue = particleAlpha;

p.lastValue = 0;

//the particle will be stuck in one place until this time has elapsed:

p.stuckTime = 90 + Math.random()*20;

p.accelX = 0;

p.accelY = gravity;

p.accelZ = 0;

}

//update viewing angle

turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);

sinAngle = Math.sin(turnAngle);

cosAngle = Math.cos(turnAngle);

//background fill

context.fillStyle = "#000000";

context.fillRect(0,0,displayWidth,displayHeight);

//update and draw particles

p = particleList.first;

while (p != null) {

//before list is altered record next particle

nextParticle = p.next;

//update age

p.age++;

//if the particle is past its "stuck" time, it will begin to move.

if (p.age > p.stuckTime) {

p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);

p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);

p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);

p.x += p.velX;

p.y += p.velY;

p.z += p.velZ;

}

We are doing two things here to calculate display coordinates.

The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for

x and z (but the y coordinate will not change).

Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.

rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);

rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;

m =radius_sp* fLen/(fLen - rotZ);

p.projX = rotX*m + projCenterX;

p.projY = p.y*m + projCenterY;

//update alpha according to envelope parameters.

if (p.age < p.attack+p.hold+p.decay) {

if (p.age < p.attack) {

p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;

}

else if (p.age < p.attack+p.hold) {

p.alpha = p.holdValue;

}

else if (p.age < p.attack+p.hold+p.decay) {

p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;

}

else {

p.dead = true;

}

//see if the particle is still within the viewable range.

if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {

outsideTest = true;

}

else {

outsideTest = false;

}

if (outsideTest||p.dead) {

recycle(p);

}

else {

//depth-dependent darkening

depthAlphaFactor = (1-rotZ/zeroAlphaDepth);

depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);

context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";

/*ADD TEXT function!*/

context.fillText(p.flake,p.projX, p.projY);

/*ADD TEXT function!*/

//draw

context.beginPath();

if(opt_display_dots)

{context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);}

context.closePath();

context.fill();

}

p = nextParticle;

}

function addParticle(x0,y0,z0,vx0,vy0,vz0) {

var newParticle;

var color;

//check recycle bin for available drop:

if (recycleBin.first != null) {

newParticle = recycleBin.first;

//remove from bin

if (newParticle.next != null) {

recycleBin.first = newParticle.next;

newParticle.next.prev = null;

}

else {

recycleBin.first = null;

}

//if the recycle bin is empty, create a new particle (a new ampty object):

else {

newParticle = {};

}

//add to beginning of particle list

if (particleList.first == null) {

particleList.first = newParticle;

newParticle.prev = null;

newParticle.next = null;

}

else {

newParticle.next = particleList.first;

particleList.first.prev = newParticle;

particleList.first = newParticle;

newParticle.prev = null;

}

//initialize

newParticle.x = x0;

newParticle.y = y0;

newParticle.z = z0;

newParticle.velX = vx0;

newParticle.velY = vy0;

newParticle.velZ = vz0;

newParticle.age = 0;

newParticle.dead = false;

newParticle.flake = unicodeFlakes[Math.floor(Math.random() * unicodeFlakes.length)];

if (Math.random() < 0.5) {

newParticle.right = true;

}

else {

newParticle.right = false;

}

return newParticle;

}

function recycle(p) {

//remove from particleList

if (particleList.first == p) {

if (p.next != null) {

p.next.prev = null;

particleList.first = p.next;

}

else {

particleList.first = null;

}

else {

if (p.next == null) {

p.prev.next = null;

}

else {

p.prev.next = p.next;

p.next.prev = p.prev;

}

//add to recycle bin

if (recycleBin.first == null) {

recycleBin.first = p;

p.prev = null;

p.next = null;

}

else {

p.next = recycleBin.first;

recycleBin.first.prev = p;

recycleBin.first = p;

p.prev = null;

}

</script>

<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>

WEB前端学习交流群21 598399936</a></p>

</body>

</html>

有部分发不出来，这里来领取源码 WEB前端学习交流群21 598399936