JS画布动态实现黑客帝国背景效果

本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码，供大家参考，具体内容如下

效果图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    body{
      overflow: hidden;
    }
  </style>
</head>
<body>
    <canvas id="mom" style="background:#111"></canvas>
  <script>
   window.onload = function(){
    //获取画布对象
    var canvas = document.getElementById("mom");
    //获取画布的上下文
    //getContext() 方法返回一个用于在画布上绘图的环境。
    var context =canvas.getContext("2d");
    //获取浏览器屏幕的宽度和高度
    var W = window.innerWidth;
    var H = window.innerHeight;
    //设置canvas的宽度和高度
    canvas.width = W;
    canvas.height = H;
    //每个文字的字体大小
    var fontSize = 16;
    //计算列
    var colunms = Math.floor(W /fontSize);
    //记录每列文字的y轴坐标
    var drops = [];
    //给每一个文字初始化一个起始点的位置
    //计算每一个文字所谓坐标 存储y轴的坐标
    for(var i=0;i<colunms;i++){
      drops.push(0);
    }
    //运动的文字
    var str ="JavaScript function(){}";
    //4:fillText(str,x,y);原理就是去更改y的坐标位置
    //绘画的函数
    function draw(){
      context.fillStyle = "rgba(0,0,0,0.05)";
      //fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
      context.fillRect(0,0,W,H);
      //给字体设置样式
      context.font = "700 "+fontSize+"px 微软雅黑";
      //给字体添加颜色
      context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色
      //写入画布中
      for(var i=0;i<colunms;i++){
        var index = Math.floor(Math.random() * str.length);//设置文字出发时间随机 Math.floor(Math.random()*str.length)让数组里面的文字索引随机出现
        var x = i*fontSize;
        var y = drops[i] *fontSize;//也让y轴方向也向下掉一个文字的距离
        context.fillText(str[index],x,y);
        // //如果要改变时间，肯定就是改变每次他的起点
        if(y >= canvas.height && Math.random()>0.99){
          drops[i] = 0;
        }
        drops[i]++;//让数组里面的值每次加一，用于上面的y轴下掉
      }
    };
    //随机颜色
    function randColor(){
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,20);
  };
  </script>
</body>
</html>

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

赞 (0)

相关推荐

  • 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+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

  • js仿黑客帝国字母掉落效果代码分享

    js仿黑客帝国字母掉落效果代码分享

    看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下,                                      ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt

  • JS实现黑客帝国文字下落效果

    JS实现黑客帝国文字下落效果

    代码一: 黑客帝国文字下落效果 查看效果     源码下载 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; h

  • JS画布动态实现黑客帝国背景效果

    本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下 效果图 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g

  • JS实现动态星空背景效果

    JS实现动态星空背景效果

    本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下 这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: <canvas id="canvas"></canvas> CSS: /*css reset */ body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav { margin: 0; padding: 0; } html,body {

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src

  • 使用js实现动态背景

    使用js实现动态背景

    本文实例为大家分享了js实现动态背景的具体代码,供大家参考,具体内容如下 1.将下面的代码复制并存为js文件 window.onload = function () { //定义body的margin由默认值8px->0px document.body.style.margin = "0"; document.body.style.background = "#30333F"; //创建canvas画布 document.body.appendChild(do

  • Vue.js Ajax动态参数与列表显示实现方法

    Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&

  • JS实现动态移动层及拖动浮层关闭的方法

    本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>动态移动的层</title> <body bgcolor="#ADBAC9"> <div id="div1" class="yellow" style="VISIBILITY:visible ; background-color:#FF

  • Angular JS 生成动态二维码的方法

    一.场景 二维码的场景,很多.这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接- 技术实现,如果用后端实现,需要构造输出一个图片流.或者后端生产二维码图片,给图片地址就好了.弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储.太费力. 如果前端实现,这样就很轻松了.这只是个分享二维码,分享出去给人家扫一扫.利用前端的 canvas,这里坐下调研. jq 封装的 qrcode.js ,文章网上一大堆. angular js :https://github.c

  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

随机推荐