JavaScript canvas實現程式碼雨效果
阿新 • • 發佈:2021-06-14
本文例項為大家分享了canvas實現程式碼雨效果的具體程式碼,供大家參考,具體內容如下
先看效果圖
這個效程式設計客棧果圖是不是像極了以前電影裡面的黑客NcKPTaeri技術,看起來蠻難的,其實操作起來還是挺簡單的。
canvas其實就是畫布的意思
首先我們得有一個畫布
<body> <canvas id="canvas"></canvas> </body>
再設這樣一個背景
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 conNcKPTaeritext = 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; //設定一個 字型大小的變數 var fontsize = 16; //設定一個變數用來存放 一整行能夠同時容納多少個字 var count = width/fontsize; console.log(count); //建立一個數組 用來存放字的 var arr = []; for(var i = 0; i < count; i++){ arr.push(0); console.log(arr); } //用陣列的方式 存放資料 var stringarr = "I Love You" function show(){ //開始畫畫 context.beginPath(); context.fillRect(0,width,height); //透明度 context.fillStyle = "rgba(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();//呼叫函式 var timer = setInterval(show,30); </script>
如有不足,請多指導。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。