在畫布上執行

獲取制圖環境

全屏獲取屏幕寬度和屏幕高度

確定每個文字的寬度 以確定列

循環輸出

定時器調用

HTML 部分

 !DOCTYPE HTML html head meta http-equiv= Content-Type content= text/html; charset=utf-8 title HTMLcanvas矩形陣雨 /title /head body canvas id= c 您的瀏覽器不支持 請升級 /canvas /body /html 

CSS 部分

 style type= text/css /* 基本的復位 */* { margin:0; padding:0;}/* 給body一個背景 使畫布看起來更清晰 */body { background-color:#000;}canvas { display:block;} /style 

Javascript 部分

 script type= text/jscript  var c = document.getElementById( c //獲取id var ctx = c.getContext( 2d //2d制圖  c.width = window.innerWidth; //獲取屏幕寬度 c.height = window.innerHeight; //獲取屏幕高度 var chinese = abcdefghijklmnopqrstuvwxyz //canvas 陣雨文字 chinese = chinese.split( //split 分離 var font_size = 10; //字體大小 10px var columns = c.width/font_size;  //獲取列 屏幕寬度/字體大小 var drops = []; // drop 落下 新建數組 for(n=0; n columns; n++) //控制列輸出 drops[n] = 1; //draw function draw(){ ctx.fillStyle = rgba(0,0,0,0.05) //繪制矩形 ctx.fillRect(0,0,c.width,c.height); //以(0,0)為坐標 畫制矩形  ctx.fillStyle = #0F0 //綠色字體 ctx.font = font_size + px arial //以像素為單位 宋體 for(var i=0; i drops.length; i++) { var text = chinese[Math.floor(Math.random()*chinese.length)]; // Math.floor 對浮點數向下取整 ctx.fillText(text, i*font_size, drops[i]*font_size); // 規定在畫布上輸出的文本 開始繪制文本的x坐標 y坐標 if(drops[i]*font_size c.height Math.random() 0.975) // 如果下落的文本大于屏幕高度 或者 隨機數大于0.975 drops[i] = 0; // 重置下落 drops[i]++; // 繼續執行 } setInterval(draw,33); //33 執行一次draw() /script 

此文到此結束

我始終相信這個世界上充滿了美好與希望 加油！

以上就是HTMLcanvas矩形陣雨的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。