JavaScript canvas仿代碼流瀑布
更新時間：2020年02月10日 15:25:33 作者：crazy的藍色夢想
這篇文章主要為大家詳細介紹了JavaScript canvas仿代碼流瀑布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了canvas仿代碼流瀑布的具體代碼，供大家參考，具體內容如下
在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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript調試常見報錯及原因分析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能
公司項目搞優(yōu)惠活動,讓做一個轉盤抽獎的活動,這篇文章主要給大家介紹了關于JavaScript實踐之使用Canvas開發(fā)一個可配置的大轉盤抽獎功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標跟隨小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了javascript框架設計模式,結合實例形式分析了javascript模板方法模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了JS彈出窗口插件zDialog簡單用法,結合簡單實例形式分析了zDialog插件彈出窗口的基本使用方法與參數(shù)含義,需要的朋友可以參考下2016-06-06
今天小編就為大家分享一篇解決layui調用自定義方法提示未定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript創(chuàng)建數(shù)組的方法詳解
這篇文章主要為大家介紹了JavaScript創(chuàng)建數(shù)組的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
JavaScript中將字符串轉換為數(shù)字的七種方法總結
在js的使用中往往伴隨著有格式帶來的問題,下面這篇文章主要給大家介紹了關于JavaScript中將字符串轉換為數(shù)字的七種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
用nodejs實現(xiàn)PHP的print_r函數(shù)代碼
這篇文章主要介紹了用nodejs實現(xiàn)PHP的print_r函數(shù)代碼,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了微信小程序模板與設置WXML，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08