JavaScript canvas實(shí)現(xiàn)代碼雨效果
本文實(shí)例為大家分享了canvas實(shí)現(xiàn)代碼雨效果的具體代碼,供大家參考,具體內(nèi)容如下
先看效果圖
這個(gè)效果圖是不是像極了以前電影里面的黑客技術(shù),看起來蠻難的,其實(shí)操作起來還是挺簡單的。
canvas其實(shí)就是畫布的意思
首先我們得有一個(gè)畫布
<body> <canvas id="canvas"></canvas> </body>
再設(shè)這樣一個(gè)背景
HTML部分
<body> <canvas id="canvas"></canvas> <div></div> </body>
CSS部分
<style> *{ margin: 0; padding: 0; } #canvas{ overflow: hidden; position: absolute; z-index: 1; } div{ width: 480px; height: 280px; border-radius: 50%; background-image: url(img/第八天素材.jpg); position: absolute; top: calc(50% - 140px); left: calc(50% - 240px); z-index: 2; opacity: 0.4; } </style>
后面就是JS部分
一個(gè)畫布,一個(gè)畫筆,還有給畫布一個(gè)寬高
<script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = window.innerWidth; var height = window.innerHeight; canvas.height = height; canvas.width = width; </script>
詳細(xì)代碼如下:
<script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = window.innerWidth; var height = window.innerHeight; canvas.height = height; canvas.width = width; //設(shè)置一個(gè) 字體大小的變量 var fontsize = 16; //設(shè)置一個(gè)變量用來存放 一整行能夠同時(shí)容納多少個(gè)字 var count = width/fontsize; console.log(count); //創(chuàng)建一個(gè)數(shù)組 用來存放字的 var arr = []; for(var i = 0; i < count; i++){ arr.push(0); console.log(arr); } //用數(shù)組的方式 存放數(shù)據(jù) var stringarr = "I Love You" function show(){ //開始畫畫 context.beginPath(); context.fillRect(0,0,width,height); //透明度 context.fillStyle = "rgba(0,0,0,0.05)"; //字體得顏色 context.strokeStyle = "chartreuse"; for( var i =0; i<arr.length; i++ ) { var x = i*fontsize; var y = arr[i]*fontsize; var index = Math.floor(Math.random()*stringarr.length); context.strokeText(stringarr[index],x,y); if( y >=height&&Math.random()>0.99 ){ arr[i]=0; } arr[i]++; } context.closePath(); } show();//調(diào)用函數(shù) var timer = setInterval(show,30); </script>
如有不足,請(qǐng)多指導(dǎo)。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Popup彈出框添加數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Popup彈出框添加數(shù)據(jù)的簡單實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10詳解js location.href和window.open的幾種用法和區(qū)別
這篇文章主要介紹了詳解js location.href和window.open的幾種用法和區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12js根據(jù)給定的日期計(jì)算當(dāng)月有多少天實(shí)現(xiàn)思路及代碼
根據(jù)給定的日期計(jì)算當(dāng)月有多少天,想必這樣的功能大家都想實(shí)現(xiàn)吧,所以本文的出現(xiàn)相當(dāng)有必要,接下來看下實(shí)現(xiàn)代碼,感興趣的朋友可以了解下,希望對(duì)你有所幫助2013-02-02mustache.js實(shí)現(xiàn)首頁元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁元件動(dòng)態(tài)渲染的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制
這篇文章主要介紹了JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制的相關(guān)資料,需要的朋友可以參考下2014-12-12