JS實現《黑客帝國》字元雨飄落特效

2021-07-11 04:22:10 字數 779 閱讀 5490

此段**通過canvas元素實現了電影《黑客帝國》中進入matrix的終端介面的乙個動畫效果。

相容h5和各種版本的瀏覽器。可以在這裡看到線上效果,

點我,點我!

在瀏覽器中開啟,配上f11全屏效果,效果棒棒的!

在**的起始部分,使用了乙個相容低版本瀏覽器的requestanimationframe的方法。也能提高瀏覽器的效能。

**裡有5個技巧,

1、var clearcolor = 『rgba(0, 0, 0, .1)』;

ctx.fillstyle = clearcolor;

ctx.fillrect(0, 0, w, h);

此段**在每次迴圈的時候繪製了乙個0.1透明度的蒙層,一次次的覆蓋,在字元下落的時候,留下一段陰影效果。

2、context.filltext(text, i * font_size, drops[i] * font_size);

通過此段**在一次迴圈中繪製出整屏的字元,通過i的增加變更列,通過drops[i],變更每列的行。通過drops[i]最初形成是依據高度隨機的,第二屏之後都是從0起始。

3、ctx.translate(w, 0);

ctx.scale(-1, 1);

通過翻轉畫布,造成字元翻轉的效果,給人一種神秘感。原電影中的日文都是翻轉後的。

4、math.random() > 0.95;

可以使每列字元消失的時間隨機,這樣重新生成的時間也隨機了,形成字元參差不齊的效果。

5、words字串可以依據需要修改,全是日文平假名感覺更真實。

實現黑客帝國數字雨效果

今日閒得慌,折騰了乙個黑客帝國數字雨效果,還蠻不錯的。操作 新建乙個文字文件,輸入以下 再將副檔名修改為bat,執行即可。命令提示符 0 1 echo off title 黑客帝國 setlocal enabledelayedexpansion color 0a for l i in 1,1,80 ...

bat實現黑客流星雨BAT bat黑客帝國

怎麼才能實現黑客帝國裡炫酷的流星雨呢?現在,我將用bat 創造乙個流星雨特效 文章最後有完整 開始!直接上 echo off mode con cols 42 lines 20 color 02 set m 1 set v 1 set code ghijklmnopqrstuvwxyz0123456...

js實現黑客帝國二進位制雨

作者主頁 myvin 感謝antineutrino和cyclone77的意見,點選兩位博主id可檢視其主頁。因為之前是判斷落出視口高度並且大於乙個隨機數才再次繪製,中間會有一斷間隔,所以會有一斷一斷的感覺,已經將高度判斷修改為2 3,這樣會好一些,已在文中同步修改,且下文會有對應說明。再次感謝ant...