1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>流星雨</title> 6 <meta name="keywords" content="關鍵詞，關鍵字"> 7 <meta name="description" content="描述信息"> 8 <style> 9 body { 10 margin: 0; 11 overflow: hidden; 12 } 13 </style> 14 </head> 15 16 <body> 17 18 <!-- 19 <canvas>畫布 畫板 畫畫的本子 20 --> 21 <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas> 22 23 <!-- 24 javascript 25 畫筆 26 --> 27 <script> 28 29 //獲取畫板 30 //doccument 當前文檔 31 //getElement 獲取一個標簽 32 //ById 通過Id名稱的方式 33 //var 聲明一片空間 34 //var canvas 聲明一片空間的名字叫做canvas 35 var canvas = document.getElementById("canvas"); 36 //獲取畫板權限 上下文 37 var ctx = canvas.getContext("2d"); 38 //讓畫板的大小等於屏幕的大小 39 /* 40 思路： 41 1.獲取屏幕對象 42 2.獲取屏幕的尺寸 43 3.屏幕的尺寸賦值給畫板 44 */ 45 //獲取屏幕對象 46 var s = window.screen; 47 //獲取屏幕的寬度和高度 48 var w = s.width; 49 var h = s.height; 50 //設置畫板的大小 51 canvas.width = w; 52 canvas.height = h; 53 54 //設置文字大小 55 var fontSize = 14; 56 //計算一行有多少個文字 取整數 向下取整 57 var clos = Math.floor(w/fontSize); 58 //思考每一個字的坐標 59 //創建數組把clos 個 0 （y坐標存儲起來） 60 var drops = []; 61 var str = "qwertyuiopasdfghjklzxcvbnm"; 62 //往數組里面添加 clos 個 0 63 for(var i = 0;i<clos;i++) { 64 drops.push(0); 65 } 66 67 //繪制文字 68 function drawString() { 69 //給矩形設置填充色 70 ctx.fillStyle="rgba(0,0,0,0.05)" 71 //繪制一個矩形 72 ctx.fillRect(0,0,w,h); 73 74 //添加文字樣式 75 ctx.font = "600 "+fontSize+"px 微軟雅黑"; 76 //設置文字顏色 77 ctx.fillStyle = "#00ff00"; 78 79 for(var i = 0;i<clos;i++) { 80 //x坐標 81 var x = i*fontSize; 82 //y坐標 83 var y = drops[i]*fontSize; 84 //設置繪制文字 85 ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y); 86 if(y>h&&Math.random()>0.99){ 87 drops[i] = 0; 88 } 89 drops[i]++; 90 } 91 92 } 93 //定義一個定時器，每隔30毫秒執行一次 94 setInterval(drawString,30); 95 </script> 96 </body> 97 </html>