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


文章目錄

0. 前言

1. 完整代碼

參考文獻


【關鍵詞】:flex 布局 demo 牛刀小試

  0、前言

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

圖一  案例效果圖 

  1、完整代碼部分

  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>

  參考文獻:

    【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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM