成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模擬黑客帝國效果2（canvas實驗）

cnTomato / 2548人閱讀

摘要：之前看到一個和應(yīng)用的效果練了一下，演示這次用玩一下，感覺也還不錯，傳送門演示地址推薦開源來選取需引用的外部代碼片段全屏文字轉(zhuǎn)為數(shù)組用于計算輸出文字時坐標(biāo)，所以長度即為列數(shù)初始值輸出文字讓背景逐漸由透明到不透明文字顏色逐行輸出文字隨機

之前看到一個css和js應(yīng)用的效果練了一下，演示：
這次用canvas玩一下，感覺也還不錯，
Github傳送門：https://github.com/EchoLsx/hacker
演示地址：http://codepen.io/echo_lsx/pen/ZOaOyZ





 /*Javascript代碼片段*/
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    
    //全屏
    c.height = window.innerHeight;
c.width = window.innerWidth;

//文字
var txts = "101010110101";
//轉(zhuǎn)為數(shù)組
txts = txts.split("");

var font_size = 16;
var columns = c.width/font_size; 
//用于計算輸出文字時坐標(biāo)，所以長度即為列數(shù)
var drops = [];
//初始值
for(var x = 0; x < columns; x++)
    drops[x] = 1; 

//輸出文字
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)];
        //輸出文字，注意坐標(biāo)的計算
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        
        //如果繪滿一屏或隨機數(shù)大于0.95（此數(shù)可自行調(diào)整，效果會不同）
        if(drops[i]*font_size > c.height || Math.random() >0.95)
            drops[i] = 0;
        
        //用于Y軸坐標(biāo)增加
        drops[i]++;
    }
}

setInterval(draw, 100);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79982.html

相關(guān)文章

  • 網(wǎng)絡(luò)安全態(tài)勢可視化

    摘要：安全態(tài)勢可視化系統(tǒng)的目的是生成網(wǎng)絡(luò)安全綜合態(tài)勢圖，以多視圖多角度多尺度的方式與用戶進(jìn)行交互?？梢钥吹剑诳凸羰菬o處不在，無時不有的，世界互聯(lián)網(wǎng)的安全態(tài)勢并不如我們印象中那么隱蔽和少見。 導(dǎo)語 網(wǎng)絡(luò)態(tài)勢可視化技術(shù)作為一項新技術(shù)，是網(wǎng)絡(luò)安全態(tài)勢感知與可視化技術(shù)的結(jié)合，將網(wǎng)絡(luò)中蘊涵的態(tài)勢狀況通過可視化圖形方式展示給用戶，并借助于人在圖形圖像方面強大的處理能力，實現(xiàn)對網(wǎng)絡(luò)異常行為的分析和檢測...

    testHs 評論0 收藏0

  • 每周一點canvas動畫——序

    摘要：每周一點動畫是一個系列文章，本文并不對的做過多的介紹，我默認(rèn)你已經(jīng)了解基本的繪圖，并在此告訴你如何使用簡單的數(shù)學(xué)與物理知識創(chuàng)建相當(dāng)酷炫的動畫。下一節(jié)，我們就正式開始我們的動畫之旅 《每周一點canvas動畫》是一個系列文章，本文并不對canvas的API做過多的介紹，我默認(rèn)你已經(jīng)了解基本的canvas繪圖API，并在此告訴你如何使用簡單的數(shù)學(xué)與物理知識創(chuàng)建相當(dāng)酷炫的動畫。一說到物理和數(shù)...

    svtter 評論0 收藏0

  • Canvas getContext("3d")?

    摘要：兩條平行的直線在無窮遠(yuǎn)的地方看起來會匯集到一起，而匯集的點，在透視里稱作消失點。小孔成像三維空間的火焰，透過小孔，在二維成像屏上顯示了二維的畫面。 前言 不好意思，標(biāo)題其實是開了個玩笑。大家都知道，Canvas 獲取繪畫上下文的 api 是 getContext(2d)。我第一次看到這個 api 定義的時候，就很自然的認(rèn)為，既然有 2d 那一定是有 3d 的咯？ 但是我接著我看到了 a...

    tinna 評論0 收藏0

  • Python 實現(xiàn) FTP 弱口令掃描器

    摘要：一項目說明項目簡介本次實驗通過使用實現(xiàn)一個弱口令掃描器開始，入門滲透測試技術(shù)，實驗涉及協(xié)議原理，庫的使用等知識點。找到密碼并不會終止程序，而是會繼續(xù)掃描其他主機的弱口令，直到所有的主機都掃描一遍。 showImg(https://segmentfault.com/img/bVz0PF); 一、項目說明 1.1 項目簡介 本次實驗通過使用 Python 實現(xiàn)一個 FTP 弱口令掃描器開始...

    cocopeak 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<