js+canvas实现代码雨效果

本文实例为大家分享了js+canvas代码雨效果的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   html,body{
    height: 100%;
    width: 100%;
   }
   #canvas{
    display: block;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById('canvas')
   var c= canvas.getContext('2d')
   var cw = canvas.width = window.innerWidth
   var ch = canvas.height = window.innerHeight 

   var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l']
   var init = function(){
    this.x = Math.random()*cw
    this.y = 0
    this.content1 =Math.random()*15
    this.speed = Math.random()*5+20
    this.add = function(){
     this.y+=this.speed
    }
    this.reset1 = function(){
     this.x= Math.random()*cw
     this.y = 0
    }
   }
   //定义一个随机色
   var gl = c.createLinearGradient(0, 0, cw, ch);
       gl.addColorStop(0, 'red');

       gl.addColorStop(.5, 'yellow');

       gl.addColorStop(1, 'cyan');

   var arr=[]
   for(var i=0;i<20;i++){
    arr.push(new init())
   }
   setInterval(function(){

    c.fillStyle = 'rgba(0,0,0,0.05)'
    c.fillRect(0,0,cw,ch)
    //上面的两句是给一个背景，放在计时器里面是为了每运行一次，就重新绘画一次
    //用来清空好画布
    //1,yong rgba()来表示颜色是为了给一个透明度，新画上去的画布没有完全覆盖
    //以前的画布，所以有个渐变的效果

    for(var i=0;i<arr.length;i++){
     c.fillStyle = gl
     c.font = '30px 微软雅黑'

     c.fillText(str[i],arr[i].x,arr[i].y)

     //让他落到底部再回来
     if(arr[i].y>ch-20){
      arr[i].reset1()
     }
     arr[i].add()
    }

    //
   },1000/60)
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

    先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo

  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下 先看效果图 这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的. canvas其实就是画布的意思 首先我们得有一个画布 <body> <canvas id="canvas"></canvas> </body> 再设这样一个背景 HTML部分 <body> <canvas id="canvas&q

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:

  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window

  • JavaScript canvas实现字符雨效果

    JavaScript canvas实现字符雨效果

    本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画字符的时候就画一遍黑色背景,但是这个背景是有透明度的,并且这个黑色背景的透明度还比较小,只有零点零八(经过测试,0.08比较合适,也可以更改查看效果):字符是从上往下落,上面的字符先出现,下面的字符后出现,程序重复地画黑色背景,就算有透明度,叠加起来,上面的字符就会先被覆盖,下面的后出现的字符还是还比较明显,就形成了逐

  • js canvas实现写字动画效果

    本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t

  • JS Canvas接口和动画效果大全

    概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id

  • JavaScript实现代码雨效果

    JavaScript实现代码雨效果

    本文实例为大家分享了JavaScript实现代码雨效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name=

  • Python实现屏幕代码雨效果的示例代码

    Python实现屏幕代码雨效果的示例代码

    直接上代码 import pygame import random def main(): # 初始化pygame pygame.init() # 默认不全屏 fullscreen = False # 窗口未全屏宽和高 WIDTH, HEIGHT = 1100, 600 init_width, init_height = WIDTH, HEIGHT # 字块大小,宽,高 suface_height = 18 # 字体大小 font_size = 20 # 创建一个窗口 screen = pyga

  • C语言实现代码雨效果

    C语言实现代码雨效果

    本文实例为大家分享了C语言实现代码雨效果的具体代码,供大家参考,具体内容如下 一.项目描述和最终的效果展示 项目:   让字符从上到下依次的下落,呈现出代码雨. 最终效果图如下所示: 二.静态的代码雨 代码如下: #include<graphics.h> #include<time.h> #include<conio.h> #define High 800//游戏画面 #define Width 1000 #define CharSize 25//每个字符显示的大小 i

随机推荐