canvas动画之三 -- 黑客帝国文字掉落效果
今天要實現的效果是黑客帝國里面的文字掉落效果，先來看一下圖
點擊這里，查看demo
其實效果也是比較好實現的，只要計算出每個文字該出現的地方，然后繪制文字就可以了。
下面就來說具體的實現方法吧。
首先，新建頁面寫上canvas標簽，在js中獲取到并設置高寬：
<canvas id="canvas"></canvas> <script>var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");//設置canvas大小，全屏顯示setSize();//設置大小的函數function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;} </script>canvas標簽設置完了之后，然后再來設置一個數組，也就是從屏幕上掉落出來哪些文字，當然這里設置什么都可以，我設置的是0~9、a~z，為了簡單我就是使用了split方法將字符串轉換為數組：
var txt = "0123456789abcdefghijklmnopqrstuvwxyz"; var arr = txt.split("");接下來就該設置一下字體的大小和屏幕總共能容納多少列了，這里我把字體大小設置為16px，為了方便計算這里先設置為16，然后用瀏覽器的寬度除以字體大小，就能計算出來屏幕可以容納多少列文字，還需要設置一個數組，來保存每一列中的文字該在哪里繪制，當然每列第一個字都是從屏幕最上面開始，需要初始化一下：
//字體大小 var font_size = 16; //多少列，整數 var column = Math.floor(canvas.width / font_size) ; //每列文字繪制點 var drop = []; //初始化數組 for(let i = 0;i<column ; i++){drop[i] = 1; }剛剛忘了一點，沒有設置onresize，這里設置一下，當然這個在什么時候設置都是可以的，在window上添加onresize事件，瀏覽器窗口改變時重新計算canvas的大小：
window.onresize = function(){setSize(); }function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight; }現在準備工作都完成了，接下來就開始繪制文字效果吧，前面已經定義了數組，現在需要從數組中隨機取得一個數字，通過Math.random()產生隨機數獲取，輸出文字時使用fillText()可以在指定位置輸出文字，當每一列中繪制的文字超過瀏覽器的高度時，則從0開始重新繪制，當然如果所有的列都是在占滿瀏覽器高度再重新繪制時這樣的效果并不好看，所以我們需要一個隨機數，當隨機數大于0.9的時候就重新繪制，繪制完每一列文字的時候，需要保存一下下一次該列文字該在什么地方出現：
//逐行輸出文字 for (var i = 0; i < drops.length; i++) {//隨機取要輸出的文字var text = txts[Math.floor(Math.random() * txts.length)];//輸出文字，注意坐標的計算ctx.fillText(text, i * font_size, drops[i] * font_size);//如果繪滿一屏或隨機數大于0.95（此數可自行調整，效果會不同）if (drops[i] * font_size > c.height || Math.random() > 0.95){drops[i] = 0;}//用于Y軸坐標增加drops[i]++; }在上面這個循環之前為了讓效果更好看，我們需要讓背景透明度逐漸變化，并且還需要設置好字體，所以整個draw()函數如下：
//輸出文字 function draw() {//讓背景逐漸由透明到不透明ctx.fillStyle = "rgba(0, 0, 0, 0.05)";ctx.fillRect(0, 0, c.width, c.height);ctx.fillStyle = "#0F0"; //文字顏色ctx.font = font_size + "px arial";//逐行輸出文字for (var i = 0; i < drops.length; i++) {//隨機取要輸出的文字var text = txts[Math.floor(Math.random() * txts.length)];//輸出文字，注意坐標的計算ctx.fillText(text, i * font_size, drops[i] * font_size);//如果繪滿一屏或隨機數大于0.95（此數可自行調整，效果會不同）if (drops[i] * font_size > c.height || Math.random() > 0.95){drops[i] = 0;}//用于Y軸坐標增加drops[i]++;} }接下來只要讓它不斷的循環繪制就可以了：
init();//初始化 function init(){setSize();setInterval(draw,50); }然后整個絢麗的效果就完成了，是不是很簡單呢。
下面是整個代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>黑客帝國</title><style>*{padding: 0;margin:0;}</style> </head> <body> <canvas id="canvas"></canvas> <script>var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");setSize();var arr = "0123456789abcdefghijklmnopqrstuvwxyz".split("");var font_size = 16;var column = Math.floor(canvas.width / font_size) ;var drop = [];for(let i = 0;i<column ; i++){drop[i] = 1;}init();//初始化function init(){setSize();setInterval(draw,50);}//輸出文字function draw(){ctx.fillStyle = "rgba(0, 0, 0, 0.05)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle = "#0F0"; //文字顏色ctx.font = font_size + "px arial";//逐行輸出文字for(var i = 0;i<drop.length ; i++){//隨機輸出文字var text = arr[Math.floor(Math.random()*arr.length)];//輸出文字，坐標重新計算ctx.fillText(text,i*font_size, drop[i]*font_size);//如果繪滿一頁或者隨機數超過0.9則重新繪制if(drop[i] * font_size >canvas.height || Math.random() > 0.9){drop[i] = 0;}drop[i] ++ ;}}window.onresize = function(){setSize();}function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;} </script> </body> </html>總結
以上是生活随笔為你收集整理的canvas动画之三 -- 黑客帝国文字掉落效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十天征服单片机百度云_郭天祥十天征服单片
- 下一篇： 创业公司商业计划书