黑客帝國源碼
阿新 • • 發佈：2019-04-30
fill 每次 alt 如果 html5 floor tor 進制 添加
canvas黑客帝國代碼雨特效 | jQuery特效|手機微信網站特效| 網頁特效庫
下面是源碼，用文本復制完成後改下後綴名為html就可以了
源碼
<!doctype html>
<canvas id="canvas" style="background:#111"></canvas> <script type="text/javascript"> window.onload = function(){ //獲取畫布對象 var canvas = document.getElementById("canvas"); //獲取畫布的上下文 var context =canvas.getContext("2d"); //獲取瀏覽器屏幕的寬度和高度 var W = window.innerWidth; var H = window.innerHeight; //設置canvas的寬度和高度 canvas.width = W; canvas.height = H; //每個文字的字體大小 var fontSize = 16; //計算列 var colunms = Math.floor(W /fontSize); //記錄每列文字的y軸坐標 var drops = []; //給每一個文字初始化一個起始點的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //運動的文字 var str ="javascript html5 canvas"; //4:fillText(str,x,y);原理就是去更改y的坐標位置 //繪畫的函數 function draw(){ context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //給字體設置樣式 context.font = "700 "+fontSize+"px 微軟雅黑"; //給字體添加顏色 context.fillStyle ="#00cc33";//可以rgb,hsl, 標準色，十六進制顏色 //寫入畫布中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改變時間，肯定就是改變每次他的起點 if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,30); }; </script>
黑客帝國源碼