Hello,我是Shendi,在web前端的路上一去不復返
這次給大家帶來了一個文字雨效果,效果如下
實現流程
首先我們要知道什麼是Canvas
Canvas是h5的一個標籤(畫布) 在畫布上任何一點都可以操作(繪製)
Canvas需要配合js來使用
創建Canvas
新建一個html文件,在<body>標籤中添加如下標籤 代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<canvas id='my_canvas'>此處給canvas添加id值 用於js獲取此元素 必要</canvas>
</body>
</html>
創建了Canvas後,接下來給canvas設置一下樣式(讓canvas填充整個屏幕) 在head標籤中添加如下代碼
<style>
#my_canvas {
position:absolute;/*設置佈局爲絕對佈局*/
width:100%;/*寬度100%填充屏幕*/
height:100%;/*高度100%填充*/
top:0;/*讓元素與窗口無頂部邊距*/
left:0;/*讓元素與窗口無左邊距*/
}
</style>
添加了樣式後我們的canvas就會填充整個屏幕了
接下來我們要用js來實現我們想要的效果了
在body的最下方中添加如下代碼
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//這裏編寫js腳本
//我們先要獲取到canvas
var myCanvas= document.getElementById("my_canvas");
//然後要獲取到繪製的環境(可以理解爲畫筆,從canvas中獲取)
var context = myCanvas.getContext("2d");
//獲取到環境後 我們就可以繪製了
//我們需要知道canvas的大小 並且給canvas設置一下大小
//因爲我們在css中給canvas設置的是百分比,所以我們獲取到的canvas的大小會比窗口小
//但是canvas的確是填充了屏幕了 可以按f12 將鼠標放在canvas元素上觀看
//所以我們這裏還需要再次給canvas設置大小,不能去除css樣式,去掉後會發現多了滾動條
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//我們先填充整個屏幕試試
//可以使用fillStyle來設置畫筆顏色 rgba函數等於 r=紅 g=綠 b=藍 a=透明度
context.fillStyle = "rgba(0,0,0,1)";
//fillRect函數是繪製一個正方形 第一個參數是x軸 第二個是y軸 3=寬度 4=高度
context.fillRect(0,0,width,height);
//打開網頁 看看效果 我們會發現整個屏幕變成了黑色
</script>
</body>
瞭解了Canvas 基本使用後 我們就可以來繪製想要的效果了
我們現在讓屏幕有一種從白到黑的動畫效果
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//這裏編寫js腳本
//我們先要獲取到canvas
var myCanvas= document.getElementById("my_canvas");
//然後要獲取到繪製的環境(可以理解爲畫筆,從canvas中獲取)
var context = myCanvas.getContext("2d");
//獲取到環境後 我們就可以繪製了
//我們需要知道canvas的大小 並且給canvas設置一下大小
//因爲我們在css中給canvas設置的是百分比,所以我們獲取到的canvas的大小會比窗口小
//但是canvas的確是填充了屏幕了 可以按f12 將鼠標放在canvas元素上觀看
//所以我們這裏還需要再次給canvas設置大小,不能去除css樣式,去掉後會發現多了滾動條
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//設置顏色 將透明度改爲0.1 這樣繪製出來的正方形就會是淺色 淺色疊起來就變成深了
context.fillStyle = "rgba(0,0,0,0.1)";
//setInterval函數是定時調用指定function裏的代碼 並隔多少秒重複調用(永久的)
setInterval(function () {
context.fillRect(0,0,width,height);
},1000);
//打開網頁 看看效果 我們會發現動畫效果實現了 我們設置的間隔是1秒
</script>
</body>
有了這種效果後，我們接下來只需要繪製文本就行了 (繪製後又會被背景給填充 所以就實現了文本從出現到慢慢消失的效果)
以下代碼就可以 實現文字雨的效果了
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//這裏編寫js腳本
//我們先要獲取到canvas
var myCanvas= document.getElementById("my_canvas");
//然後要獲取到繪製的環境(可以理解爲畫筆,從canvas中獲取)
var context = myCanvas.getContext("2d");
//獲取到環境後 我們就可以繪製了
//我們需要知道canvas的大小 並且給canvas設置一下大小
//因爲我們在css中給canvas設置的是百分比,所以我們獲取到的canvas的大小會比窗口小
//但是canvas的確是填充了屏幕了 可以按f12 將鼠標放在canvas元素上觀看
//所以我們這裏還需要再次給canvas設置大小,不能去除css樣式,去掉後會發現多了滾動條
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//要繪製的文本
var text = "Shendi";
//將文本變爲字符數組
text = text.split("");
//文本大小 設置畫筆的大小
var t_size = 20;
context.font = t_size + "px 黑體";
//獲取一行能畫多少個 以及能畫多少列
var row = width / t_size;
var col = height / t_size;
//獲取每一行對應的列位置(用來實現文字的y位置不同的效果)
var cols = [];
for (var i = 0;i < col;i++) {
cols[i] = 1;
}
//setInterval函數是定時調用指定function裏的代碼 並隔多少秒重複調用(永久的)
setInterval(function () {
//設置顏色 將透明度改爲0.1 這樣繪製出來的正方形就會是淺色 淺色疊起來就變成深了
context.fillStyle = "rgba(0,0,0,0.1)";
context.fillRect(0,0,width,height);
//設置文字的顏色 綠色
context.fillStyle = "#0F0";
//繪製文字 循環 一次畫一行
for (var i = 0;i < row;i++) {
//判斷此列是否到底了 到底了則重新開始
//爲了實現不是一行同行的往下落 我們需要隨機來將某個列重新開始
//所以要加 || Math.random() > 0.96 只有0.04的機率讓這列重新開始 可自行調整
if (cols[i] >= col || Math.random() >= 0.96) {
cols[i] = 0;
}
//繪製文字 fillText用於繪製文字 第一個參數是繪製的文本 第二個是x座標 第三個是y
//這裏我每次繪製的都是按順序來的
context.fillText(text[i % 6],i * t_size,cols[i] * t_size);
}
},33);
//打開網頁 看看效果 如果效果沒實現試試將調用間隔調低 我這裏是33毫秒調用一次
//還有繪製的正方形的顏色設置 透明度可以改的更低 讓文字保留的更久
//可以試着調一下調用速度 字體大小 透明度等看看效果
//效果完成 --Shendi
</script>
</body>
這樣，效果就實現了！純手碼.