h5+js實(shí)現(xiàn)文字雨

實(shí)現(xiàn)流程

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、沛縣ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的沛縣網(wǎng)站制作公司

首先我們要知道什么是Canvas

?

????Canvas是h6的一個標(biāo)簽(畫布)在畫布上任何一點(diǎn)都可以操作(繪制)

?

????Canvas需要配合js來使用

?

創(chuàng)建Canvas

?

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

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8"/>

</head>

<body>

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

</body>

</html>

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

<style>

????#my_canvas {

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

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

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

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

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

}

</style>

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

?

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

?

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

<body>

????<canvas id='my_canvas'>...</canvas>

????<script type='text/javascript'>

????????//這里編寫js腳本

????????//我們先要獲取到canvas

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

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

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

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

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

????????//因?yàn)槲覀冊赾ss中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

????????//但是canvas的確是填充了屏幕了 可以按f12將鼠標(biāo)放在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=藍(lán)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>

????<canvas id='my_canvas'>...</canvas>

????<script type='text/javascript'>

????????//這里編寫js腳本

????????//我們先要獲取到canvas

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

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

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

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

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

????????//因?yàn)槲覀冊赾ss中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

????????//但是canvas的確是填充了屏幕了 可以按f12將鼠標(biāo)放在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)動畫效果實(shí)現(xiàn)了 我們設(shè)置的間隔是1秒

????</script>

</body>

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

?

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

<body>

????<canvas id='my_canvas'>...</canvas>

????<script type='text/javascript'>

????????//這里編寫js腳本

????????//我們先要獲取到canvas

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

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

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

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

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

????????//因?yàn)槲覀冊赾ss中給canvas設(shè)置的是百分比,所以我們獲取到的canvas的大小會比窗口小

????????//但是canvas的確是填充了屏幕了 可以按f12將鼠標(biāo)放在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)的列位置(用來實(shí)現(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++) {

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

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

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

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

????????????????????cols[i] = 0;

????????????????}

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

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

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

????????????}

????????},33);

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

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

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

????????//效果完成--Shendi

????</script>

</body>

?這樣，效果就實(shí)現(xiàn)了！純手碼.

當(dāng)前題目：h5+js實(shí)現(xiàn)文字雨
文章起源：http://bm7419.com/article46/gegehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、建站公司、網(wǎng)站收錄、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名