仿黑客帝國片頭文字流星雨
阿新 • • 發佈：2018-12-27
文章目錄
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