文字粒子表白效果代码
代码语言: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