亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

模擬黑客帝國效果2（canvas實(shí)驗(yàn)）

cnTomato / 2715人閱讀

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

之前看到一個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; 
//用于計(jì)算輸出文字時坐標(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++)
    {
        //隨機(jī)取要輸出的文字
        var text = txts[Math.floor(Math.random()*txts.length)];
        //輸出文字，注意坐標(biāo)的計(jì)算
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        
        //如果繪滿一屏或隨機(jī)數(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://www.ezyhdfw.cn/yun/79982.html

相關(guān)文章

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

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

    testHs 評論0 收藏0

  • 每周一點(diǎn)canvas動畫——序

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

    svtter 評論0 收藏0

  • Canvas getContext("3d")?

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

    tinna 評論0 收藏0

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

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

    cocopeak 評論0 收藏0

發(fā)表評論

0條評論

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