溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
實現流程
首先我們要知道什么是Canvas
?
????Canvas是h6的一個標簽(畫布) 在畫布上任何一點都可以操作(繪制)
?
????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;
????????function(){ //原油代碼?http://www.kaifx.cn/mt4/kaifx/1803.html
????????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>
?這樣，效果就實現了！純手碼.
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
