<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas 3D球形文字云动画特效 - 网页模板</title>
<style>
body {
background-color:#000000;
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>
<script src="js/modernizr.min.js"></script>
<div style="text-align:center">
<canvas id="canvasOne" width="900" height="520" ></canvas>
</div>
<script type="text/javascript">
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(
