JavaScript canvas仿代碼流瀑布
更新時(shí)間:2020年02月10日 15:25:33 作者:crazy的藍(lán)色夢(mèng)想
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas仿代碼流瀑布,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了canvas仿代碼流瀑布的具體代碼,供大家參考,具體內(nèi)容如下
在js部分寫canvas代碼,有詳細(xì)注釋
html部分:
一個(gè)canvas元素:
<canvas id="canvas" ></canvas>
css部分:
<style> *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; } </style>
<script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 獲取瀏覽器的寬度和高度 var w = window.innerWidth; var h = window.innerHeight; // 設(shè)置canvas的寬高 canvas.width = w; canvas.height = h; // 每個(gè)文字的大小 var fontSize = 16; // 一共可以有多少列文字 var col = Math.floor(w / fontSize); // 記錄每列文字的y軸坐標(biāo) var cpy = []; for(var i = 0;i< col; i++) { cpy[i] = 1; } //定義文字 var str = "Javascriphafhsdhfsfsf{}"; // 繪制 draw(); setInterval(draw,30); function draw(){ context.beginPath(); // 背景填充顏色 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,w,h); // 設(shè)置字體大小 context.font = fontSize +"px bold 微軟雅黑 "; // 設(shè)置字體顏色 context.fillStyle = "#00cc33"; for(var i = 0; i < col;i++) { var index = Math.floor(Math.random()*str.length); var x = i*fontSize; var y = cpy[i]*fontSize; context.fillText(str.charAt(index),x,y); if(y >= h && Math.random()> 0.99)// 出現(xiàn)時(shí)間延遲的效果 { cpy[i]=0;// 只要Math.random> 0.99 時(shí)才縱坐標(biāo)從0開始寫字 } cpy[i]++;// 數(shù)組值加一,以便下一次寫的字在下面一行 } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
僅用[]()+!等符號(hào)就足以實(shí)現(xiàn)幾乎任意Javascript代碼
僅用一些符號(hào)就足以實(shí)現(xiàn)幾乎任意Javascript代碼的方法,比較怪異,對(duì)于特殊需要可能用得到。2010-03-03微信小程序用戶授權(quán),以及判斷登錄是否過(guò)期的方法
這篇文章主要介紹了微信小程序用戶授權(quán)及判斷登錄是否過(guò)期,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript EasyPager 分頁(yè)函數(shù)
好久不寫js,手都有點(diǎn)生了。寫個(gè)小東西熱手。2011-05-05javascript面向?qū)ο笾x成員方法實(shí)例分析
這篇文章主要介紹了javascript面向?qū)ο笾x成員方法,實(shí)例分析了成員方法的定義與使用技巧,需要的朋友可以參考下2015-01-01