流星雨代碼
1.流星雨代碼
<!doctype html> <html> <head> <meta charset="gbk-2312" /> <title>流星雨</title> <meta name="keywords" content="關鍵詞，關鍵字"> <meta name="description" content="描述信息"> <style> body { margin: 0; overflow: hidden; } </style> <input value="全屏" type='button' οnclick='toggleFullScreen();' /> </head> <body> <!-- <canvas>畫布 畫板 畫畫的本子 --> <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas> <!-- javascript 畫筆 --> <script> //獲取畫板 //doccument 當前文檔 //getElement 獲取一個標籤 //ById 通過Id名稱的方式 //var 聲明一片空間 //var canvas 聲明一片空間的名字叫做canvas var canvas = document.getElementById("canvas"); //獲取畫板權限 上下文 var ctx = canvas.getContext("2d"); //讓畫板的大小等於屏幕的大小 /* 思路： 1.獲取屏幕對象 2.獲取屏幕的尺寸 3.屏幕的尺寸賦值給畫板 */ //獲取屏幕對象 var s = window.screen; //獲取屏幕的寬度和高度 var w = s.width; var h = s.height; //設置畫板的大小 canvas.width = w; canvas.height = h; //設置文字大小 var fontSize = 14; //計算一行有多少個文字 取整數 向下取整 var clos = Math.floor(w/fontSize); //思考每一個字的坐標 //創建數組把clos 個 0 （y坐標存儲起來） var drops = []; var str = "qwertyuiopasdfghjklzxcvbnm1234567890！@#￥%……&*（）-=+"; //往數組裏面添加 clos 個 0 for(var i = 0;i<clos;i++) { drops.push(0); } //繪製文字 function drawString() { //給矩形設置填充色 ctx.fillStyle="rgba(0,0,0,0.05)" //繪製一個矩形 ctx.fillRect(0,0,w,h); //添加文字樣式 ctx.font = "600 "+fontSize+"px 微軟雅黑"; //設置文字顏色 ctx.fillStyle = "#00ff00"; for(var i = 0;i<clos;i++) { //x坐標 var x = i*fontSize; //y坐標 var y = drops[i]*fontSize; //設置繪製文字 ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y); if(y>h&&Math.random()>0.99){ drops[i] = 0; } drops[i]++; } } function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } } //定義一個定時器，每隔30毫秒執行一次 setInterval(drawString,30); </script> </body> </html>
