<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas字母喷射效果</title> <style> *{ margin:0; padding:0; } body{ background:#000000; overflow:hidden; } </style> </head> <body> <canvas id=canvas></canvas> <script> //页面命名空间 命名空间就是对象 需要用到this var Canvas={}; Canvas.anim={ //初始化 init:function(){ var canvas=document.getElementById("canvas"); this.ctx=canvas.getContext("2d");//画笔,创建2d空间,加this相当于全局变量 canvas.width=window.innerWidth; canvas.height=window.innerHeight; this.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; this.cw=canvas.width; this.ch=canvas.height; this.particles=[]; }, //执行动画 render:function(){ //粒子的属性 var particle={ //显示的位置random为随机数0-1 x:this.cw/2, y:this.ch, character:this.letters[Math.floor(Math.random()*this.letters.length)], //速度值 xSpeed: (Math.random()*20)-10, ySpeed: (Math.random()*20)-10 } this.particles.push(particle); this.drawParticles(); }, //绘制字母 drawParticles: function(){ this.fadeCanvas(); var particleCount=this.particles.length; var c=this.ctx; for(var i=0;i<particleCount;i++){ var particle=this.particles[i]; c.font="12px sans-serif"; c.fillStyle="#ffffff"; c.fillText(particle.character,particle.x,particle.y); particle.x += particle.xSpeed; particle.y += particle.ySpeed; // 驶近Y轴 particle.y *= 0.97; } }, //清除画布 fadeCanvas: function(){ this.ctx.fillStyle = "rgba(0,0,0,0.5)"; this.ctx.fillRect(0,0,this.cw,this.ch); } }; Canvas.anim.init(); setInterval(function(){ Canvas.anim.render(); },13); </script> </body> </html>
加入绘制字母
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas字母喷射</title> <style> *{ padding: 0px; margin: 0px; } #canvas{ background-color:#000; } </style> <body> <canvas id="canvas"></canvas> </body> <script> // 页面命名空间 var Canvas = {} Canvas.anim = { // 初始化 init: function(){ var canvas = document.getElementById("canvas"); this.ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; this.cw = canvas.width; this.ch = canvas.height; // 随机字母 this.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM"; // 位置 this.particles = []; }, // 执行动画 rander: function(){ // 显示的位置 var particle = { x: this.cw/2, y: this.ch, // 随机字母 character: this.letters[Math.floor(Math.random()*this.letters.length)], // 速度值 xSpeed: (Math.random()*20)-10, ySpeed: (Math.random()*20)-10 } this.particles.push(particle); this.drawParticles(); }, // 绘制字母 drawParticles: function(){ this.fadeCanvas(); var c = this.ctx; // 喷射字母 var particleCount = this.particles.length; for(var i=0;i<particleCount;i++){ var particle = this.particles[i]; c.font = "12px"; c.fillStyle = "#ffffff"; c.fillText(particle.charact