zoukankan      html  css  js  c++  java
  • 数字雨(Javascript使用canvas绘制Matrix,效果很赞哦)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        body{
            overflow: hidden;
            margin: 0;
        }    
    </style>
    </head>
    <body>
    
    <canvas id="q"></canvas>
    <script>
    var s = window.screen;
    var width = q.width = s.width;
    var height = q.height = s.height;
    var letters = Array(256).join(1).split('');
    var draw = function () {
      q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
      q.getContext('2d').fillRect(0,0,width,height);
      q.getContext('2d').fillStyle='#0F0';
      letters.map(function(y_pos, index){
        text = String.fromCharCode(34+Math.random()*33);
    //    text = String.fromCharCode(3e4+Math.random()*33);//显示中文
        x_pos = index * 10;
        q.getContext('2d').fillText(text, x_pos, y_pos);
        letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
        q.getContext('2d').fillStyle='#'+letters[index];
      });
    };
    setInterval(draw, 33);
    </script>
    </body>
    </html>
  • 相关阅读:
    函数二 10
    函数初识 09
    文件操作 08
    数据类型的补充 day07
    小数据池 深浅copy 集合
    python Mysql 多条件查询
    ElasticSearch Python 基本操作
    用PyInstaller把Python代码打包成单个独立的exe可执行文件
    python 编译EXE文件
    Git 创建新分支检查分支
  • 原文地址:https://www.cnblogs.com/dcrenl/p/3259558.html
Copyright © 2011-2022 走看看