仿黑客帝國片頭文字流星雨

時間 2019-11-30

標籤片頭文字流星雨简体版

原文原文鏈接

文章目錄

0. 前言

1. 完整代碼

參考文獻

【關鍵詞】：flex 佈局 demo 牛刀小試

0、前言

　　入坑碼農有段時間，一直想些寫本身感興趣的demo，偶然在網上看到這個案例，決定本身try一下。主要是使用canvas進行繪製，閱讀本文沒有canvas基礎也能夠讀懂，有詳細註釋，邊看邊學也來的及。效果圖以下html

圖一案例效果圖 html5

一、完整代碼部分

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style>
  8         body {
  9             margin: 0;
 10         }
 11     </style>
 12 </head>
 13 
 14 <body>
 15     <canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas標籤，請您更換瀏覽器！</canvas>
 16     <!--支持<canvas>的瀏覽器會只渲染<canvas>標籤，而忽略其中的替代內容。不支持 <canvas> 的瀏覽器則 會直接渲染替代內容。-->
 17     <script>
 18         // 第一步：設置canvas尺寸;
 19         // 第二步：渲染;
 20            // 1.字母隨機;
 21            // 2.渲染背景顏色;
 22            // 3.循環全部內容，將內容填入;
 23         // 第三步:隨機生成顏色;
 24         if (canvas.getContext) {
 25             class meteorShowers {
 26                 constructor() {
 27                     this.can = document.getElementById("canvas"); 
 28                     this.ctx = this.can.getContext("2d");
 29                     //得到渲染上下文和它的繪畫功能。
 30                     // getContext('2d') 方法讓咱們拿到一個CanvasRenderingContext2D對象， 全部的繪圖操做都須要經過這個對象完成。
 31                     this.s = window.screen; //獲取電腦屏幕
 32                     // 設置畫布尺寸:
 33                     this.w = this.can.width = this.s.width;
 34                     this.h = this.can.height = this.s.height;
 35                     this.words = Array(255).join("1").split("");
 36                     //Array()   []    Array(100) length:100  Array(1, 2,3,4);   [1, 2, 3, 4]
 37                     //數組轉字符串 arr.join()  默認爲","  George,John,Thomas
 38 
 39                     //繪製文本            
 40                     //ctx.fillStyle = "#fff";            
 41                     //ctx.fillText("玄武",200,200);
 42                     //text須要繪製的文本內容 x,y繪製;開始的座標位置;      
 43                     //['',''].join("1") -> "a1b"
 44                 }
 45                 init() {
 46                     // ctx.fillStyle; 圖形的背景填充顏色
 47                     // ctx.fillRect;  繪製矩形
 48                     // 設置背景顏色，尺寸
 49                     this.ctx.fillStyle = "rgba(0,0,0,0.05)"; //設置圖形的填充顏色
 50                     this.ctx.fillRect(0, 0, this.w, this.h) //繪製矩形0,0 繪製的起點座標 w,h矩形的寬高 
 51                 }
 52                 render() {
 53                     //文字填充：this.ctx.fillText  屬性；
 54                     //原理建立一個數組讓數組隨機數字；
 55                     // 隨機內容：
 56                     // 十進制Unicode編碼範圍
 57                     //65-90 A-Z  97-122 a-z  48-57 數字0-9  19968-40869  漢字
 58                     let text = String.fromCharCode(65 + Math.ceil(Math.random() * 57)); //字母隨機
 59                     this.ctx.fillStyle = this.color();
 60                     this.words.map(
 61                         function (y, index, arr) { // 第三個參數爲整個數組
 62                             //數組裏面每一個元素的一個映射   不改變原數組
 63                             let x = index * 10;
 64                             this.ctx.fillText(text, x, y)
 65                             //在指定(x,y)位置填充指定文本
 66                             //fillText(text, x, y [, maxWidth])  在指定的(x,y)位置填充指定的文本，繪製的最大寬度是可選的.
 67                             this.words[index] = (y > 748 + Math.random() * 452) ? 0 : y + 10;
 68                             // console.log(words[index])
 69                         }, this
 70                     )
 71                 }
 72                 color() {
 73                     var r = Math.ceil(Math.random() * 255);
 74                     var g = Math.ceil(Math.random() * 255);
 75                     var b = Math.ceil(Math.random() * 255);
 76                     return "rgb(" + r + "," + g + "," + b + ")"
 77                 }
 78             }
 79             let running = new meteorShowers;
 80 
 81             setInterval(function () {
 82                 running.init();
 83                 running.render();
 84             }, 100)
 85         } else {
 86             console.log("canvas-unsupported code here");
 87         }
 88 
 89 
 90 
 91 
 92 
 93         //封裝一個函數來生成隨機顏色            
 94         //方法一: rgb 0-255             
 95         function color1() { //Math.ceil()向上取整  100.1 -> 101                //Math.floor()向下取整 100.9 -> 100     
 96             var r = Math.ceil(Math.random() * 255);
 97             var g = Math.ceil(Math.random() * 255);
 98             var b = Math.ceil(Math.random() * 255);
 99             return "rgb(" + r + "," + g + "," + b + ")"
100         }
101 
102         //方法二: 十六進制  0-9 a-f  
103         function color2() {
104             var colors = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
105             var color = '';
106             for (var i = 0; i < 6; i++) {
107                 var n = Math.ceil(Math.random() * 15);
108                 color += '' + colors[n];
109             }
110             return "#" + color;
111         }
112         //console.log(color2());
113         //方法三 : 十六進制 進制轉換  ffffff
114         //隨機生成一個 0-16777215的值而後再轉換爲十六進制
115         function color3() { //toString(16) 轉換爲十六進制                
116             var color = Math.ceil(Math.random() * 16777215).toString(16); //若果生成的隨機數長度小於六位的話就須要往前面補零                //000001 
117             while (color.length < 6) {
118                 color = "0" + color;
119             }
120             return "#" + color;
121         }
122         //console.log(color3());            
123         //方法四: 裝逼用      
124         function color4() {
125             return "#" + (function (color) {
126                 return new Array(7 - color.length).join("0") + color
127             })((Math.random() * 0x1000000 << 0).toString(16))
128         };
129     </script>
130 </body>
131 
132 </html>

參考文獻：canvas

　　　　【0】HTML 5 Canvas 參考手冊　　　　　　　http://www.w3school.com.cn/tags/html_ref_canvas.asp數組

　　　　【1】HTML5 Canvas　　　　　　　　http://www.runoob.com/html/html5-canvas.html瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。