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)文章
在項目開發(fā)中我們常需要給某些數(shù)據(jù)定義一個唯一標(biāo)識符,便于尋找關(guān)聯(lián),這篇文章主要給大家介紹了關(guān)于JS生成id的多種解決方案,文中介紹的方法都非常實用,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS 中實現(xiàn)一個串型異步函數(shù)隊列，文章通過async/await 串型請求展開詳情，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要給大家介紹了關(guān)于利用JavaScript差集實現(xiàn)一個對比小工具的相關(guān)資料,雖然實現(xiàn)的界面不是太好看,但好在功能實用即可,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了隨鼠標(biāo)移動的時鐘非常漂亮遺憾的是只支持IE,需要的朋友可以參考下2014-08-08
如何實現(xiàn)表格中行點擊時的漸擴效果！...2007-01-01
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
淺談JavaScript窗體Window.ShowModalDialog使用
這篇文章主要介紹了淺談JavaScript窗體Window.ShowModalDialog使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
文件上傳是 Web 開發(fā)肯定會碰到的問題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點續(xù)傳的相關(guān)資料,需要的朋友可以參考下2021-08-08