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