JavaScript canvas實(shí)現(xiàn)代碼雨效果
本文實(shí)例為大家分享了canvas實(shí)現(xiàn)代碼雨效果的具體代碼,供大家參考,具體內(nèi)容如下
先看效果圖
這個(gè)效果圖是不是像極了以前電影里面的黑客技術(shù),看起來(lái)蠻難的,其實(shí)操作起來(lái)還是挺簡(jiǎn)單的。
canvas其實(shí)就是畫(huà)布的意思
首先我們得有一個(gè)畫(huà)布
<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è)畫(huà)布,一個(gè)畫(huà)筆,還有給畫(huà)布一個(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è)變量用來(lái)存放 一整行能夠同時(shí)容納多少個(gè)字 var count = width/fontsize; console.log(count); //創(chuàng)建一個(gè)數(shù)組 用來(lái)存放字的 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(){ //開(kāi)始畫(huà)畫(huà) 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)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js+css實(shí)現(xiàn)紅包雨效果
- HTML+JS實(shí)現(xiàn)“代碼雨”效果源碼(黑客帝國(guó)文字下落效果)
- canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼
- JS+CSS+HTML實(shí)現(xiàn)“代碼雨”類(lèi)似黑客帝國(guó)文字下落效果
- JS實(shí)現(xiàn)代碼雨特效
- js+canvas實(shí)現(xiàn)代碼雨效果
- JavaScript實(shí)現(xiàn)代碼雨效果
- 基于JS實(shí)現(xiàn)漫畫(huà)中大雨滂沱的效果
- 利用JS打造黑客代碼雨效果
- JavaScript實(shí)現(xiàn)字符雨效果
相關(guān)文章
Bootstrap表單簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Popup彈出框添加數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Popup彈出框添加數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10詳解js location.href和window.open的幾種用法和區(qū)別
這篇文章主要介紹了詳解js location.href和window.open的幾種用法和區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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)有必要,接下來(lái)看下實(shí)現(xiàn)代碼,感興趣的朋友可以了解下,希望對(duì)你有所幫助2013-02-02mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(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