JavaScript canvas仿代碼流瀑布
更新時間:2020年02月10日 15:25:33 作者:crazy的藍色夢想
這篇文章主要為大家詳細介紹了JavaScript canvas仿代碼流瀑布,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了canvas仿代碼流瀑布的具體代碼,供大家參考,具體內(nèi)容如下
在js部分寫canvas代碼,有詳細注釋
html部分:
一個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; // 設置canvas的寬高 canvas.width = w; canvas.height = h; // 每個文字的大小 var fontSize = 16; // 一共可以有多少列文字 var col = Math.floor(w / fontSize); // 記錄每列文字的y軸坐標 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); // 設置字體大小 context.font = fontSize +"px bold 微軟雅黑 "; // 設置字體顏色 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)時間延遲的效果 { cpy[i]=0;// 只要Math.random> 0.99 時才縱坐標從0開始寫字 } cpy[i]++;// 數(shù)組值加一,以便下一次寫的字在下面一行 } } </script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
僅用[]()+!等符號就足以實現(xiàn)幾乎任意Javascript代碼
僅用一些符號就足以實現(xiàn)幾乎任意Javascript代碼的方法,比較怪異,對于特殊需要可能用得到。2010-03-03JavaScript EasyPager 分頁函數(shù)
好久不寫js,手都有點生了。寫個小東西熱手。2011-05-05