此段**通過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...