JavaScript和html5生成文字雨

發(fā)布時間：2020-06-12 11:30:16 來源：億速云閱讀：291 作者：Leah 欄目：web開發(fā)

本篇文章展示了JavaScript和html5生成文字雨的具體操作，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

首先我們要知道什么是Canvas

Canvas是h6的一個標簽(畫布) 在畫布上任何一點都可以操作(繪制)

Canvas需要配合js來使用

創(chuàng)建Canvas

新建一個html文件,在<body>標簽中添加如下標簽代碼如下

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<canvas id='my_canvas'>此處給canvas添加id值用于js獲取此元素必要</canvas>

</body>

</html>

創(chuàng)建了Canvas后,接下來給canvas設(shè)置一下樣式(讓canvas填充整個屏幕) 在head標簽中添加如下代碼

<style>

#my_canvas {

position:absolute;/*設(shè)置布局為絕對布局*/

width:100%;/*寬度100%填充屏幕*/

height:100%;/*高度100%填充*/

top:0;/*讓元素與窗口無頂部邊距*/

left:0;/*讓元素與窗口無左邊距*/

}

</style>

添加了樣式后我們的canvas就會填充整個屏幕了

接下來我們要用js來實現(xiàn)我們想要的效果了

在body的最下方中添加如下代碼

<body>

//這里編寫js腳本

//我們先要獲取到canvas

var myCanvas= document.getElementById("my_canvas");

//然后要獲取到繪制的環(huán)境(可以理解為畫筆,從canvas中獲取)

var context = myCanvas.getContext("2d");

//獲取到環(huán)境后我們就可以繪制了

//我們需要知道canvas的大小并且給canvas設(shè)置一下大小

//因為我們在css中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

//但是canvas的確是填充了屏幕了可以按f12 將鼠標放在canvas元素上觀看

//所以我們這里還需要再次給canvas設(shè)置大小,不能去除css樣式,去掉后會發(fā)現(xiàn)多了滾動條

var width = myCanvas.width = window.innerWidth;

var height = myCanvas.height = window.innerWidth;

//我們先填充整個屏幕試試

//可以使用fillStyle來設(shè)置畫筆顏色 rgba函數(shù)等于 r=紅 g=綠 b=藍 a=透明度

context.fillStyle = "rgba(0,0,0,1)";

//fillRect函數(shù)是繪制一個正方形第一個參數(shù)是x軸第二個是y軸 3=寬度 4=高度

context.fillRect(0,0,width,height);

//打開網(wǎng)頁看看效果我們會發(fā)現(xiàn)整個屏幕變成了黑色

</script>

</body>

了解了Canvas 基本使用后我們就可以來繪制想要的效果了

我們現(xiàn)在讓屏幕有一種從白到黑的動畫效果

<body>

//這里編寫js腳本

//我們先要獲取到canvas

var myCanvas= document.getElementById("my_canvas");

//然后要獲取到繪制的環(huán)境(可以理解為畫筆,從canvas中獲取)

var context = myCanvas.getContext("2d");

//獲取到環(huán)境后我們就可以繪制了

//我們需要知道canvas的大小并且給canvas設(shè)置一下大小

//因為我們在css中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

//但是canvas的確是填充了屏幕了可以按f12 將鼠標放在canvas元素上觀看

//所以我們這里還需要再次給canvas設(shè)置大小,不能去除css樣式,去掉后會發(fā)現(xiàn)多了滾動條

var width = myCanvas.width = window.innerWidth;

function(){ //原油代碼 http://www.kaifx.cn/mt4/kaifx/1803.html

var height = myCanvas.height = window.innerWidth;

//設(shè)置顏色將透明度改為0.1 這樣繪制出來的正方形就會是淺色淺色疊起來就變成深了

context.fillStyle = "rgba(0,0,0,0.1)";

//setInterval函數(shù)是定時調(diào)用指定function里的代碼并隔多少秒重復(fù)調(diào)用(永久的)

setInterval(function () {

context.fillRect(0,0,width,height);

},1000);

//打開網(wǎng)頁看看效果我們會發(fā)現(xiàn)動畫效果實現(xiàn)了我們設(shè)置的間隔是1秒

</script>

</body>

有了這種效果后，我們接下來只需要繪制文本就行了 (繪制后又會被背景給填充所以就實現(xiàn)了文本從出現(xiàn)到慢慢消失的效果)

以下代碼就可以實現(xiàn)文字雨的效果了

<body>

//這里編寫js腳本

//我們先要獲取到canvas

var myCanvas= document.getElementById("my_canvas");

//然后要獲取到繪制的環(huán)境(可以理解為畫筆,從canvas中獲取)

var context = myCanvas.getContext("2d");

//獲取到環(huán)境后我們就可以繪制了

//我們需要知道canvas的大小并且給canvas設(shè)置一下大小

//因為我們在css中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

//但是canvas的確是填充了屏幕了可以按f12 將鼠標放在canvas元素上觀看

//所以我們這里還需要再次給canvas設(shè)置大小,不能去除css樣式,去掉后會發(fā)現(xiàn)多了滾動條

var width = myCanvas.width = window.innerWidth;

var height = myCanvas.height = window.innerWidth;

//要繪制的文本

var text = "Shendi";

//將文本變?yōu)樽址麛?shù)組

text = text.split("");

//文本大小設(shè)置畫筆的大小

var t_size = 20;

context.font = t_size + "px 黑體";

//獲取一行能畫多少個以及能畫多少列

var row = width / t_size;

var col = height / t_size;

//獲取每一行對應(yīng)的列位置(用來實現(xiàn)文字的y位置不同的效果)

var cols = [];

for (var i = 0;i < col;i++) {

cols[i] = 1;

}

//setInterval函數(shù)是定時調(diào)用指定function里的代碼并隔多少秒重復(fù)調(diào)用(永久的)

setInterval(function () {

//設(shè)置顏色將透明度改為0.1 這樣繪制出來的正方形就會是淺色淺色疊起來就變成深了

context.fillStyle = "rgba(0,0,0,0.1)";

context.fillRect(0,0,width,height);

//設(shè)置文字的顏色綠色

context.fillStyle = "#0F0";

//繪制文字循環(huán) 一次畫一行

for (var i = 0;i < row;i++) {

//判斷此列是否到底了到底了則重新開始

//為了實現(xiàn)不是一行同行的往下落我們需要隨機來將某個列重新開始

//所以要加 || Math.random() > 0.96 只有0.04的幾率讓這列重新開始可自行調(diào)整

if (cols[i] >= col || Math.random() >= 0.96) {

cols[i] = 0;

}

//繪制文字 fillText用于繪制文字第一個參數(shù)是繪制的文本第二個是x坐標第三個是y

//這里我每次繪制的都是按順序來的

context.fillText(text[i % 6],i * t_size,cols[i] * t_size);

}

},33);

//打開網(wǎng)頁看看效果如果效果沒實現(xiàn)試試將調(diào)用間隔調(diào)低我這里是33毫秒調(diào)用一次

//還有繪制的正方形的顏色設(shè)置透明度可以改的更低讓文字保留的更久

//可以試著調(diào)一下調(diào)用速度字體大小透明度等看看效果

//效果完成 --Shendi

</script>

</body>

以上便是JavaScript和html5生成文字雨的方法，雖然從篇幅上看很復(fù)雜，但是示例代碼非常詳細且容易理解，如果想了解更多相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊。

向AI問一下細節(jié)

JavaScript和html5生成文字雨

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽