1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>canvas字母喷射效果</title>
  6.     <style>
  7.         *{
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.         body{
  12.             background:#000000;
  13.             overflow:hidden;
  14.         }
  15.     </style>
  16.  </head>
  17.  <body>
  18.     <canvas id=canvas></canvas>
  19.     <script>
  20.  
  21.         //页面命名空间 命名空间就是对象 需要用到this
  22.         var Canvas={};
  23.         Canvas.anim={
  24.             //初始化
  25.             init:function(){
  26.                 var canvas=document.getElementById("canvas");
  27.                 this.ctx=canvas.getContext("2d");//画笔，创建2d空间，加this相当于全局变量
  28.                 canvas.width=window.innerWidth;
  29.                 canvas.height=window.innerHeight;
  30.                 this.letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  31.                 this.cw=canvas.width;
  32.                 this.ch=canvas.height;
  33.                 this.particles=[];
  34.             },
  35.             //执行动画
  36.             render:function(){
  37.                 //粒子的属性
  38.                 var particle={
  39.                     //显示的位置random为随机数0-1
  40.                     x:this.cw/2,
  41.                     y:this.ch,
  42.                     character:this.letters[Math.floor(Math.random()*this.letters.length)],
  43.                     //速度值
  44.                     xSpeed: (Math.random()*20)-10,
  45.                     ySpeed: (Math.random()*20)-10
  46.                 }
  47.                 this.particles.push(particle);
  48.                 this.drawParticles();
  49.             },
  50.             //绘制字母
  51.             drawParticles: function(){
  52.                 this.fadeCanvas();
  53.                 var particleCount=this.particles.length;
  54.                 var c=this.ctx;
  55.                 for(var i=0;i<particleCount;i++){
  56.                         var particle=this.particles[i];
  57.                     c.font="12px sans-serif";
  58.                     c.fillStyle="#ffffff";
  59.                     c.fillText(particle.character,particle.x,particle.y);
  60.                     particle.x += particle.xSpeed;
  61.                     particle.y += particle.ySpeed;
  62.                     // 驶近Y轴
  63.                     particle.y *= 0.97;
  64.                 }
  65.             },
  66.             //清除画布
  67.             fadeCanvas: function(){
  68.                 this.ctx.fillStyle = "rgba(0,0,0,0.5)";
  69.                 this.ctx.fillRect(0,0,this.cw,this.ch);
  70.             }
  71.         };
  72.         Canvas.anim.init();
  73.         setInterval(function(){
  74.             Canvas.anim.render();
  75.         },13);
  76.     </script>
  77.  </body>
  78. </html>

加入绘制字母

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>canvas字母喷射</title>
  6. <style>
  7.     *{
  8.         padding: 0px;
  9.         margin: 0px;
  10.     }
  11.     #canvas{
  12.         background-color:#000;
  13.     }
  14. </style>
  15. <body>
  16.     <canvas id="canvas"></canvas>
  17. </body>
  18.  
  19. <script>
  20.     // 页面命名空间
  21.     var Canvas = {}
  22.     Canvas.anim = {
  23.         // 初始化
  24.         init: function(){
  25.             var canvas = document.getElementById("canvas");
  26.             this.ctx = canvas.getContext("2d");
  27.             canvas.width = window.innerWidth;
  28.             canvas.height = window.innerHeight;
  29.             this.cw = canvas.width;
  30.             this.ch = canvas.height;
  31.             // 随机字母
  32.             this.letters = "QWERTYUIOPLKJHGFDSAZXCVBNM";
  33.             // 位置
  34.             this.particles = [];
  35.         },
  36.         // 执行动画
  37.         rander: function(){
  38.             // 显示的位置
  39.             var particle = {
  40.                 x: this.cw/2,
  41.                 y: this.ch,
  42.                 // 随机字母
  43.                 character: this.letters[Math.floor(Math.random()*this.letters.length)],
  44.                 // 速度值
  45.                 xSpeed: (Math.random()*20)-10,
  46.                 ySpeed: (Math.random()*20)-10
  47.             }
  48.             this.particles.push(particle);
  49.             this.drawParticles();
  50.         },
  51.         // 绘制字母
  52.         drawParticles: function(){
  53.             this.fadeCanvas();
  54.             var c = this.ctx;
  55.             // 喷射字母
  56.             var particleCount = this.particles.length;
  57.             for(var i=0;i<particleCount;i++){
  58.                 var particle = this.particles[i];
  59.                 c.font = "12px";
  60.                 c.fillStyle = "#ffffff";
  61.                 c.fillText(particle.character,particle.x,particle.y);
  62.                 particle.x += particle.xSpeed;
  63.                 particle.y += particle.ySpeed;
  64.                 // 驶近Y轴
  65.                 particle.y *= 0.97;
  66.             }
  67.             // 绘制名字
  68.             var fontParticleCount = Font.particles.length;
  69.             for(var i=0;i<fontParticleCount;i++){
  70.                 var particle = Font.particles[i];
  71.                 c.font = "12px";
  72.                 c.fillStyle = "#ff00cc";
  73.                 c.fillText(particle.character,particle.x,particle.y);
  74.             }
  75.         },
  76.         // 清除画布
  77.         fadeCanvas: function(){
  78.             this.ctx.fillStyle = "rgba(0,0,0,0.5)";
  79.             this.ctx.fillRect(0,0,this.cw,this.ch);
  80.         }
  81.     };
  82.     Canvas.anim.init();
  83.     var Font = {
  84.         init: function(){
  85.             this.startX = window.innerWidth/2-150;
  86.             this.startY = window.innerHeight/2-200;
  87.             this.speed = 130; // 速度值
  88.             this.smallSpace = 10; // 字母间隔
  89.             // 字母位置
  90.             this.particles = [];
  91.         },
  92.         // 执行动画
  93.         rander: function(xPoint, yPoint){
  94.             // 显示的位置
  95.             var particle = {
  96.                 x: xPoint,
  97.                 y: yPoint,
  98.                 // 随机字母
  99.                 character: "0",
  100.             }
  101.             this.particles.push(particle);
  102.         },
  103.         // 画I
  104.         draw_i: function(callback){
  105.             var _this = this;
  106.             var width=40,height=100;
  107.             // 画-
  108.             var draw_1 = function(){
  109.                 var i = 0;
  110.                 var intVal = setInterval(function(){
  111.                     i++;
  112.                     _this.rander(_this.startX+_this.smallSpace*i,_this.startY);
  113.                     if(_this.smallSpace*i >= width){
  114.                         clearInterval(intVal);
  115.                         draw_2();
  116.                     }
  117.                 },_this.speed);
  118.             }
  119.             // 画|
  120.             var draw_2 = function(){
  121.                 var i = 0;
  122.                 var intVal = setInterval(function(){
  123.                     i++;
  124.                     _this.rander(_this.startX+width/2+_this.smallSpace/2,_this.startY+_this.smallSpace*i);
  125.                     if(_this.smallSpace*i >= height){
  126.                         clearInterval(intVal);
  127.                         draw_3();
  128.                     }
  129.                 },_this.speed);
  130.             }
  131.             // 画-
  132.             var draw_3 = function(){
  133.                 var i = 0;
  134.                 var intVal = setInterval(function(){
  135.                     i++;
  136.                     _this.rander(_this.startX+_this.smallSpace*i,_this.startY+height+_this.smallSpace);
  137.                     if(_this.smallSpace*i >= width){
  138.                         clearInterval(intVal);
  139.                         callback();
  140.                     }
  141.                 },_this.speed);
  142.             }
  143.             draw_1();
  144.         },
  145.         // 画心形
  146.         draw_v: function(callback){
  147.             var _this = this;
  148.             var v_startX = _this.startX;
  149.             var v_startY = _this.startY;
  150.             var width=80,height=100;
  151.             // 凹度,高
  152.             var concave = 15;
  153.             // 斜边，宽高
  154.             var hypotenuseWidth = 20;
  155.             var hypotenuseHeight = 100;
  156.             var draw_1 = function(){
  157.                 var i = 0;
  158.                 _this.rander(v_startX,v_startY+concave);
  159.                 var intVal = setInterval(function(){
  160.                     i++;
  161.                     // 每次偏移量
  162.                     var y = concave/(width/2/_this.smallSpace)*i;
  163.                     _this.rander(v_startX-_this.smallSpace*i,v_startY+concave-y);
  164.                     if(_this.smallSpace*i >= width/2){
  165.                         v_startX = v_startX-_this.smallSpace*i;
  166.                         v_startY = v_startY+concave-y;
  167.                         clearInterval(intVal);
  168.                         draw_2();
  169.                     }
  170.                 },_this.speed);
  171.             }
  172.             var draw_2 = function(){
  173.                 var i = 0;
  174.                 var intVal = setInterval(function(){
  175.                     i++;
  176.                     // 每次偏移量
  177.                     var y = hypotenuseHeight/_this.smallSpace*i;
  178.                     _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
  179.                     if(_this.smallSpace*i >= hypotenuseWidth){
  180.                         v_startX = v_startX-_this.smallSpace*i;
  181.                         v_startY = v_startY+y;
  182.                         clearInterval(intVal);
  183.                         draw_3();
  184.                     }
  185.                 },_this.speed);
  186.             }
  187.             var draw_3 = function(){
  188.                 var i = 0;
  189.                 var intVal = setInterval(function(){
  190.                     i++;
  191.                     // 每次偏移量
  192.                     var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
  193.                     _this.rander(v_startX+x,v_startY+_this.smallSpace*i);
  194.                     if(_this.smallSpace*i >= height){
  195.                         v_startX = v_startX+x;
  196.                         v_startY = v_startY+_this.smallSpace*i;
  197.                         clearInterval(intVal);
  198.                         draw_4();
  199.                     }
  200.                 },_this.speed);
  201.             }
  202.             var draw_4 = function(){
  203.                 var i = 0;
  204.                 var intVal = setInterval(function(){
  205.                     i++;
  206.                     // 每次偏移量
  207.                     var x = (width/2+hypotenuseWidth)/_this.smallSpace*i;
  208.                     _this.rander(v_startX+x,v_startY-_this.smallSpace*i);
  209.                     if(_this.smallSpace*i >= height){
  210.                         v_startX = v_startX+x;
  211.                         v_startY = v_startY-_this.smallSpace*i;
  212.                         clearInterval(intVal);
  213.                         draw_5();
  214.                     }
  215.                 },_this.speed);
  216.             }
  217.             var draw_5 = function(){
  218.                 var i = 0;
  219.                 var intVal = setInterval(function(){
  220.                     i++;
  221.                     // 每次偏移量
  222.                     var y = hypotenuseHeight/_this.smallSpace*i;
  223.                     _this.rander(v_startX-_this.smallSpace*i,v_startY-y);
  224.                     if(_this.smallSpace*i >= hypotenuseWidth){
  225.                         v_startX = v_startX-_this.smallSpace*i;
  226.                         v_startY = v_startY-y;
  227.                         clearInterval(intVal);
  228.                         draw_6();
  229.                     }
  230.                 },_this.speed);
  231.             }
  232.             var draw_6 = function(){
  233.                 var i = 0;
  234.                 var intVal = setInterval(function(){
  235.                     i++;
  236.                     // 每次偏移量
  237.                     var y = concave/(width/2/_this.smallSpace)*i;
  238.                     _this.rander(v_startX-_this.smallSpace*i,v_startY+y);
  239.                     if(_this.smallSpace*i >= width/2){
  240.                         clearInterval(intVal);
  241.                         callback();
  242.                     }
  243.                 },_this.speed);
  244.             }
  245.             draw_1();
  246.         },
  247.         // 画U
  248.         draw_u: function(callback){
  249.             var _this = this;
  250.             var width=60,height=120;
  251.             // 画U_|
  252.             var draw_1 = function(){
  253.                 var i = 0;
  254.                 var intVal = setInterval(function(){
  255.                     i++;
  256.                     _this.rander(_this.startX,_this.startY+_this.smallSpace*i);
  257.                     if(_this.smallSpace*(i+2) >= height){
  258.                         clearInterval(intVal);
  259.                         draw_2();
  260.                     }
  261.                 },_this.speed);
  262.             }
  263.             // 画U_-
  264.             var draw_2 = function(){
  265.                 var function1 = function(){
  266.                     var i = 0;
  267.                     // 处理的高度
  268.                     var cHeight = _this.smallSpace*2;
  269.                     var intVal = setInterval(function(){
  270.                         i++;
  271.                         /*
  272.                         * 每次偏移量
  273.                         * _this.smallSpace*2留的高度
  274.                         */
  275.                         var y = cHeight/(width/_this.smallSpace)*i;
  276.                         var y_point = _this.startY+(height-cHeight)+y;
  277.                         _this.rander(_this.startX+_this.smallSpace*i,y_point);
  278.                         if(_this.smallSpace*i >= width/2){
  279.                             clearInterval(intVal);
  280.                             function2();
  281.                         }
  282.                     },_this.speed);
  283.                 }
  284.                 var function2 = function(){
  285.                     var i = 0;
  286.                     var intVal = setInterval(function(){
  287.                         i++;
  288.                         // 处理的高度
  289.                         var cHeight = _this.smallSpace*2;
  290.                         /*
  291.                         * 每次偏移量
  292.                         * _this.smallSpace*2留的高度
  293.                         */
  294.                         var y = cHeight/(width/_this.smallSpace)*i;
  295.                         var y_point = _this.startY+(height-_this.smallSpace)-y;
  296.                         _this.rander(_this.startX+width/2+_this.smallSpace*i,y_point);
  297.                         if(_this.smallSpace*i >= width/2){
  298.                             clearInterval(intVal);
  299.                             draw_3();
  300.                         }
  301.                     },_this.speed);
  302.                 }
  303.                 function1();
  304.             }
  305.             // 画U_|
  306.             var draw_3 = function(){
  307.                 var i = 0;
  308.                 // 处理的高度
  309.                 var cHeight = _this.smallSpace*2;
  310.                 var intVal = setInterval(function(){
  311.                     i++;
  312.                     var y_point = _this.startY+(height-cHeight)-_this.smallSpace*i;
  313.                     _this.rander(_this.startX+width,y_point);
  314.                     if(_this.smallSpace*(i+3) >= height){
  315.                         clearInterval(intVal);
  316.                         callback();
  317.                     }
  318.                 },_this.speed);
  319.             }
  320.             draw_1();
  321.         }
  322.     };
  323.     Font.init();
  324.     setInterval(function(){
  325.         Canvas.anim.rander();
  326.     },20);
  327.     //Font.draw_v();
  328.     Font.draw_i(function(){
  329.         Font.startX += 150;
  330.         Font.draw_v(function(){
  331.             Font.startX += 120;
  332.             Font.draw_u(function(){});
  333.         });
  334.     });
  335. </script>

canvas背景的更多相关文章

  1. canvas背景透明

    var can=document.getElementById("canv"); c=can.getContext("2d"); c.globalAlpha=. ...

  2. canvas 背景填充

    这儿介绍canvas的ccreatePattern函数, context.createPattern(Image,"repeat"),还可以repeat-x,reapter-y 还 ...

  3. Cocos Creator （webgl模式下怎么让canvas背景透明）

    项目中构建出web-mobile包后,打开main.js 在main.js中加入如下两行即可让canvas变透明 cc.director.setClearColor(new cc.Color(0,0, ...

  4. canvas背景动画

    偶然反驳可看到博客背景的炫酷效果  觉得很新奇就去查看了一下源码  结果在git上找到了  记录一下 https://github.com/hustcc/canvas-nest.js/

  5. JS - 使 canvas 背景透明

    canvas = document.getElementById('canvas1'); var context = canvas.getContext('2d');context.fillStyle ...

  6. canvas背景粒子动态变化动画

    var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); ...

  7. canvas 背景透明

    theCanvas = document.getElementById('canvasOne');var context = theCanvas.getContext('2d');context.fi ...

  8. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  9. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

随机推荐

  1. BZOJ1898: [Zjoi2005]Swamp 沼泽鳄鱼(矩阵快速幂)

    题意 题目链接 Sol 不难发现吃人鱼的运动每\(12s\)一个周期 所以暴力建12个矩阵,放在一起快速幂即可 最后余下的部分暴力乘 #include<bits/stdc++.h> usi ...

  2. ANN神经网络——Sigmoid 激活函数编程练习 (Python实现)

    # ---------- # # There are two functions to finish: # First, in activate(), write the sigmoid activa ...

  3. 【 Oral English】Pronunciation

    一.英语音素 1.元音(元首,主要部分) 特点: a.无阻碍,拖很长认可辨别 b.声音响亮 2.辅音(重点,刻意练习) 特点: a.刻意阻碍 b.短促 二.汉语元素 1.音节:最小组成成分,而非元/辅 ...

  4. python基础（二）--多值参数以及类

    1.多值参数函数 def 函数名(*args , **kwargs): ....... 多值参数函数顾名思义能够传入多个参数,args表示传入的元组,kwargs表示传入的字典 def functio ...

  5. androidtab

    https://github.com/H07000223/FlycoTabLayout tensorflow https://github.com/topics/tensorflow-examples ...

  6. linux 下apche无法监听端口解决办法(Permission denied: make_sock: could not bind to address)

    想建立一个测试用的虚拟主机,遇到了这个问题:[root@localhost html]# service httpd startStarting httpd: httpd: Could not rel ...

  7. js 浅拷贝有大用

    如题 像浅拷贝.深拷贝这类的知识点我们应该都明白是怎么回事,大部分都是在面试的时候会被问到.大多让你实现一个深拷贝.现实中我们都用比较暴力直接的手段 JSON stringify. 一句话就搞定,管他 ...

  8. npm install 安装项目依赖，报错ERR! Unexpected end of JSON input while parsing near的方法汇总

    问题描述: npm install 安装项目依赖的时候,有时会出现: ERR! Unexpected end of JSON input while parsing near 错误 原因: npm 的 ...

  9. Windows 10 X64 ISO 专业版&家庭版下载与永久激活

    好久没有更新博客,算算时间,已经有4年了,好吧,今天突发奇想,想把今天安装Windows 10的过程给记录下来. 2015年的时候,微软就发布了Windows 10,当时正版的Win7.Win8都可以 ...

  10. 工作好搭档(四)：铷安居 H-C81 电脑桌

    引言:工欲善其事,必先利其器.码农十年,与电脑打了二十多年的交道,也配置了一些过得去的装备.资金有限,更希望所有的投入都在刀刃上.写工作好搭档系列,是晒考虑的原因.思路.经验和教训.欢迎并希望大伙能一 ...