JavaScript canvas實現(xiàn)代碼雨效果
本文實例為大家分享了canvas實現(xiàn)代碼雨效果的具體代碼,供大家參考,具體內(nèi)容如下
先看效果圖
這個效果圖是不是像極了以前電影里面的黑客技術(shù),看起來蠻難的,其實操作起來還是挺簡單的。
canvas其實就是畫布的意思
首先我們得有一個畫布
<body> <canvas id="canvas"></canvas> </body>
再設(shè)這樣一個背景
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部分
一個畫布,一個畫筆,還有給畫布一個寬高
<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>
詳細代碼如下:
<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è)置一個 字體大小的變量 var fontsize = 16; //設(shè)置一個變量用來存放 一整行能夠同時容納多少個字 var count = width/fontsize; console.log(count); //創(chuàng)建一個數(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>
如有不足,請多指導(dǎo)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Popup彈出框添加數(shù)據(jù)實現(xiàn)方法
這篇文章主要為大家詳細介紹了Popup彈出框添加數(shù)據(jù)的簡單實現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10詳解js location.href和window.open的幾種用法和區(qū)別
這篇文章主要介紹了詳解js location.href和window.open的幾種用法和區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12js根據(jù)給定的日期計算當月有多少天實現(xiàn)思路及代碼
根據(jù)給定的日期計算當月有多少天,想必這樣的功能大家都想實現(xiàn)吧,所以本文的出現(xiàn)相當有必要,接下來看下實現(xiàn)代碼,感興趣的朋友可以了解下,希望對你有所幫助2013-02-02mustache.js實現(xiàn)首頁元件動態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實現(xiàn)首頁元件動態(tài)渲染的示例代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12JavaScript不使用prototype和new實現(xiàn)繼承機制
這篇文章主要介紹了JavaScript不使用prototype和new實現(xiàn)繼承機制的相關(guān)資料,需要的朋友可以參考下2014-12-12