文字粒子表白效果代码
代码语言:html
所属分类:表白
代码描述:文字粒子表白效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color: rgb(0, 0, 0);">
<script type="text/javascript">
BLUR = false;
PULSATION = true;
PULSATION_PERIOD = 600;
PARTICLE_RADIUS = 4;
/* disable blur before using blink */
BLINK = false;
GLOBAL_PULSATION = false;
QUALITY = 2; /* 0 - 5 */
/* set false if you prefer rectangles */
ARC = true;
/* trembling + blur = fun */
TREMBLING = 0; /* 0 - infinity */
FANCY_FONT = "Arial";
BACKGROUND = "#000";
BLENDING = true;
/* if empty the text will be a random number */
var TEXT;
num = 0;
TEXTArray = ["王子", "深爱", "公主", "直到", "永远"];
QUALITY_TO_FONT_SIZE = [10, 12, 40, 50, 100, 350];
QUALITY_TO_SCALE = [20, 6, 4, 2, 0.9, 0.5];
QUALITY_TO_TEXT_POS = [10, 20, 60, 100, 370, 280];
window.onload = function () {
document.body.style.backgroundColor = BACKGROUND;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = canvas.width;
var H = canvas.height;
var tcanvas = document.createElement("canvas");
var tctx = tcanvas.getContext("2d");
tcanvas.width = W;
tcanvas.height = H;
total_area = W * H;
total_particles = 928;
single_particle_area = total_area / total_particles;
area_length = Math.sqrt(single_particle_area);
var particles = [];
for (var i = 1; i <= total_particles; i++) {
particles.push(new particle(i));
}
function particle(i) {
this.r = Math.round(Math.random() * 255 | 0);
this.g = Math.round(Math.random() * 255 | 0);
this.b = Math.round(Math.random() * 255 | 0);
this.alpha = 1;
this.x = (i * area_length) % W;
this.y = (i * area_length) / W * area_length;
/* randomize delta to make particles sparkling */
this.deltaOffset = Math.random() * PULSATION_PERIOD | 0;
this.radius = 0.1 + Math.random() * 2;
}
var positions = [];
function new_positions() {
TEXT = TEXTArray[num];
if (num < TEXTArray.length - 1) {
num++;
} else {
num = 0;
}
//alert(TEXT);
tctx.fillSt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0