js+canvas實現(xiàn)代碼雨效果
更新時間：2021年06月30日 08:37:11 作者：雕琢?xí)r光紙戇
這篇文章主要為大家詳細介紹了js+canvas代碼雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js+canvas代碼雨效果的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
width: 100%;
}
#canvas{
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c= canvas.getContext('2d')
var cw = canvas.width = window.innerWidth
var ch = canvas.height = window.innerHeight
var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l']
var init = function(){
this.x = Math.random()*cw
this.y = 0
this.content1 =Math.random()*15
this.speed = Math.random()*5+20
this.add = function(){
this.y+=this.speed
}
this.reset1 = function(){
this.x= Math.random()*cw
this.y = 0
}
}
//定義一個隨機色
var gl = c.createLinearGradient(0, 0, cw, ch);
gl.addColorStop(0, 'red');
gl.addColorStop(.5, 'yellow');
gl.addColorStop(1, 'cyan');
var arr=[]
for(var i=0;i<20;i++){
arr.push(new init())
}
setInterval(function(){
c.fillStyle = 'rgba(0,0,0,0.05)'
c.fillRect(0,0,cw,ch)
//上面的兩句是給一個背景，放在計時器里面是為了每運行一次，就重新繪畫一次
//用來清空好畫布
//1,yong rgba()來表示顏色是為了給一個透明度，新畫上去的畫布沒有完全覆蓋
//以前的畫布，所以有個漸變的效果
for(var i=0;i<arr.length;i++){
c.fillStyle = gl
c.font = '30px 微軟雅黑'
c.fillText(str[i],arr[i].x,arr[i].y)
//讓他落到底部再回來
if(arr[i].y>ch-20){
arr[i].reset1()
}
arr[i].add()
}
//
},1000/60)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)的樣式切換功能tableCSS,結(jié)合實例形式分析了js頁面元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
Echarts中的clear()和dispose()用法實例
這篇文章主要給大家介紹了關(guān)于Echarts中clear()和dispose()用法的相關(guān)資料,clear和dispose是echarts提供的用于解決內(nèi)存溢出的方法 ,文中介紹的非常詳細,需要的朋友可以參考下2023-10-10
基于JavaScript實現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動的帶箭頭的信息層
這篇文章主要介紹了基于JavaScript實現(xiàn)鼠標(biāo)懸浮彈出跟隨鼠標(biāo)移動的帶箭頭的信息層 的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript箭頭函數(shù)的五種使用方法及三點注意事項
這篇文章主要介紹了JavaScript箭頭函數(shù)的五種使用方法及三點注意事項,箭頭函數(shù)是ES6新增的定義函數(shù)的方式,文章圍繞主題展開詳細的內(nèi)容介紹，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了關(guān)于頁面嵌入swf覆蓋div層的問題的解決方法,需要的朋友可以參考下
2014-02-02 
JavaScript創(chuàng)建對象方法實例小結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對象方法,結(jié)合實例形式總結(jié)了javascript創(chuàng)建對象的基本原理及使用工廠模式、構(gòu)造函數(shù)模式與原型模式創(chuàng)建對象的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-09-09 
實際過程中你會發(fā)現(xiàn)圖表在div中的位置不太理想,這時怎么去調(diào)整呢?下面這篇文章主要給大家介紹了關(guān)于Echarts圖表位置調(diào)整的相關(guān)資料,需要的朋友可以參考下
2022-10-10 
微信小程序中我們創(chuàng)建頁面時會自動創(chuàng)建四個文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及常用配置項的相關(guān)資料,需要的朋友可以參考下
2022-11-11 
這篇文章主要介紹了js控制多圖左右滾動切換效果，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08