小編給大家分享一下如何使用canvas輕松實現黑客帝國炫酷代碼雨，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
2.1 什么是 canvas標簽?
<canvas> 是一個HTML5中新增的元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成繪制圖像。<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
2.1.1 創建一個畫布（Canvas）
<canvas>實例:
<canvas id="mycanvas">你的瀏覽器不支持canvas</canvas>
<canvas>標簽通常需要指定一個id屬性 (在腳本中引用), <canvas>標簽 看起來和 <img> 標簽一樣，只是 <canvas> 只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。如果不給 <canvas> 設置 widht、height 屬性時，則默認 width為300，height 為 150，單位都是 px。
也可以使用 css 屬性來設置寬高，但是如寬高屬性和初始比例不一致，會出現扭曲。由于某些較老的瀏覽器（尤其是 IE9 之前的 IE 瀏覽器）或者瀏覽器不支持 HTML 元素 <canvas>，在這些瀏覽器上你應該總是能展示替代內容。
支持 <canvas> 的瀏覽器會只渲染 <canvas> 標簽，而忽略其中的替代內容。不支持 <canvas> 的瀏覽器則 會直接渲染替代內容。與 <img> 元素不同，<canvas> 元素需要結束標簽(</canvas>)。如果結束標簽不存在，則文檔的其余部分會被認為是替代內容，將不會顯示出來，你可以在HTML頁面中使用多個 <canvas> 元素。
2.1.2 使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須通過 JavaScript 來完成。
繪制步驟:
1 找到 <canvas> 元素:
var c=document.getElementById("myCanvas");2 創建 context 對象：
var ctx=c.getContext("2d");getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
3 繪制紅色矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);fillStyle屬性可以設置CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
2.1.3 Canvas 坐標
canvas 是一個二維網格。canvas 的左上角坐標為 (0,0)。上面的 fillRect (0,0,150,75) 方法意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。
2.1.4 需要用到的canvas 屬性和方法詳解
fillStyle 屬性：
fillStyle 屬性設置或返回用于填充繪畫的顏色、漸變或模式。
context.fillStyle=color|gradient|pattern;
| 值 | 描述 |
|---|---|
| color | 繪圖填充色的 顏色。默認值是 #000000。 |
| gradient | 填充繪圖的漸變對象（線性或 放射性）。 |
| pattern | 用于填充繪圖的 pattern 對象。 |
font 屬性：
font 屬性設置或返回畫布上文本內容的當前字體屬性。
font 屬性使用的語法與 css中的font屬性 相同。
context.font="italic small-caps bold 12px arial";
| 值 | 描述 |
|---|---|
| font-style | 規定字體樣式?？赡艿闹担?ul class=" list-paddingleft-2"> normal italic oblique |
| font-variant | 規定字體變體?？赡艿闹担?ul class=" list-paddingleft-2"> normal small-caps |
| font-weight | 規定字體的粗細?？赡艿闹担?ul class=" list-paddingleft-2"> normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
| font-size/line-height | 規定字號和行高，以像素計。 |
| font-family | 規定字體系列。 |
| caption | 使用標題控件的字體（比如按鈕、下拉列表等）。 |
| icon | 使用用于標記圖標的字體。 |
| menu | 使用用于菜單中的字體（下拉列表和菜單列表）。 |
| message-box | 使用用于對話框中的字體。 |
| small-caption | 使用用于標記小型控件的字體。 |
| status-bar | 使用用于窗口狀態欄中的字體。 |
fillText() 方法：
fillText() 方法在畫布上繪制填色的文本。文本的默認顏色是黑色。
context.fillText(text,x,y,maxWidth);
| 參數 | 描述 |
|---|---|
| text | 規定在畫布上輸出的文本。 |
| x | 開始繪制文本的 x 坐標位置（相對于畫布）。 |
| y | 開始繪制文本的 y 坐標位置（相對于畫布）。 |
| maxWidth | 可選。允許的最大文本寬度，以像素計。 |
fillRect() 方法：
fillRect() 方法繪制"已填充"的矩形。默認的填充顏色是黑色。
context.fillRect(x,y,width,height);
| 參數 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐標。 |
| y | 矩形左上角的 y 坐標。 |
| width | 矩形的寬度，以像素計。 |
| height | 矩形的高度，以像素計。 |
floor() 方法返回小于等于x的最大整數。如果傳遞的參數是一個整數，該值不變。
Math.floor(x)
random() 方法可返回介于 0（包含） ~ 1（不包含） 之間的一個隨機數。
Math.random()
例如獲取 1 到 10 之間的一個隨機數我們可以這樣寫：
Math.floor((Math.random()*10)+1);
ceil() 方法可對一個數進行上舍入。如果參數是一個整數，該值不變。ceil() 方法執行的是向上取整計算，它返回的是大于或等于函數參數，并且與之最接近的整數。
Math.ceil(x)
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作clearInterval() 方法的參數。
setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...)
| 參數 | 描述 |
|---|---|
| code/function | 必需。要調用一個代碼串，也可以是一個函數。 |
| milliseconds | 必須。周期性執行或調用 code/function 之間的時間間隔，以毫秒計。 |
| param1, param2, ... | 可選。 傳給執行函數的其他參數（IE9 及其更早版本不支持該參數）。 |
innerheight 返回窗口的文檔顯示區的高度。
innerwidth 返回窗口的文檔顯示區的寬度。
注意：使用 outerWidth 和 outerHeight 屬性獲取的是加上工具條與滾動條窗口的寬度與高度。
獲?。?/p>
window.innerWidth window.innerHeight
設置:
window.innerWidth=pixels window.innerHeight=pixels
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代碼雨炫酷效果:公眾號AlbertYang</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<script>
window.onload = function() {
var H = window.innerHeight;
var W = window.innerWidth;
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
mycanvas.height = H;
mycanvas.width = W;
var fontsize = 18;
var text = [];
var lie = Math.floor(W / fontsize);
var str = '01'
for (var i = 0; i < lie; i++) {
text.push(0);
}
ctx.font = fontsize + 'px 微雅軟黑';
function draw() {
ctx.fillStyle = 'rgba(0,0,0,0.08)'
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = randColor();
for (var i = 0; i < lie; i++) {
var index = Math.floor(Math.random() * str.length);
var x = Math.floor(fontsize * i)
var y = text[i] * fontsize
ctx.fillText(str[index], x, y);
if (y > H && Math.random() > 0.99) {
text[i] = 0
}
text[i]++;
}
}
function randColor() {
var r = Math.ceil(Math.random() * 155) + 100;
var g = Math.ceil(Math.random() * 155) + 100;
var b = Math.ceil(Math.random() * 155) + 100;
return 'rgb(' + r + ',' + g + ',' + b + ')'
}
console.log(randColor())
var timer = setInterval(function() {
draw();
}, 1000 / 30)
}
</script>
</head>
<body data-gr-c-s-loaded="true">
<canvas id="mycanvas" height="722" width="1536">你的瀏覽器不支持canvas</canvas>
</body>
</html>以上是“如何使用canvas輕松實現黑客帝國炫酷代碼雨”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
