IE這種上古神器居然還有人在用？？今天來分享一個很狂拽酷炫吊炸天的特效，其裝逼效果不亞于上面那張入侵五角大樓導彈制導系統(tǒng)的概念圖（手動滑稽），實現(xiàn)起來很簡單，跟著動手一起來吧
正如標題所提到的，我們使用到了canvas元素，你可以理解為是一張畫布，有了畫布之后，我們就要在畫布上進行繪制，而canvas元素本身是不具備繪圖能力的，所以我們要借助 JavaScript 來完成繪制工作
HTML 的結(jié)構(gòu)我們只需要一個標簽就夠了，若是在低版本的瀏覽器中，我們還是要提醒一下瀏覽器需要升級了
<canvas id="canvas">?
IE這種上古神器居然還有人在用？
</canvas>
設置全局 CSS 樣式，很簡單，代碼如下：
*{margin:0px;padding:0px;}
body{overflow:hidden;}
獲取瀏覽器屏幕并設置其寬高，設置一個包含 256 個空元素的數(shù)組，.join("1")用 1 來把數(shù)組里的元素拼接為字符串，.split("")過濾掉數(shù)組里的空元素
const canvas = document.getElementById("canvas"),
ctx? ? = canvas.getContext("2d"),
s? ? ? = window.screen,
w? ? ? = canvas.width = s.width,
h? ? ? = canvas.height = s.height;
let? words? = Array(256).join("1").split("");
隨后繪制矩形，設置填充的顏色及文本
setInterval( () => {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "#20af0e";
//數(shù)組元素的映射
words.map( (y,n) => {
//生成A-Z a-z之間的值
text = String.fromCharCode(Math.ceil(65 + Math.random() * 57))
x = n * 10;
ctx.fillText(text, x, y);
words[n] = (y > 758 + Math.random() * 484 )? 0 : y + 10;
});
},50);
運行結(jié)果
這里我們還可以將填充繪圖的顏色修改成隨機顏色，而顏色值是十六進制數(shù)，其范圍是 000000 - FFFFFF，轉(zhuǎn)換為十進制是 0 - 16777215，所以我們通過隨機數(shù)生成在這個范圍內(nèi)的色值，當然最后還是要轉(zhuǎn)成十六進制，不要忘記在色值前面加#號 ，一共有三種方法，代碼如下所示：
// 方法一
function color1(){
let color = "";
const colors = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
for(let i = 0; i < 6; i++){
const n = Math.ceil(Math.random() * 15);
color += "" + colors[n];
if(i == 5){
return "#" + color;
}
}
}
// 方法二
function color2(){
let color = Math.ceil(Math.random() * 16777215).toString(16);
while(color.length < 6) {
color = "0" + color;
}
return "#" + color;
}
// 方法三
function color3(){
return "#" + ( color => {
return new Array(7 - color.length).join("0") + color;
})((Math.random() * 0x1000000 << 0).toString(16))
}
運行結(jié)果
本篇的內(nèi)容到這里就全部結(jié)束了，源碼我已經(jīng)發(fā)到了 GitHubHacker meteor shower上了，有需要的同學可自行下載
End of File
行文過程中出現(xiàn)錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，最后，如果你覺得我的文章寫的還不錯，希望能夠點一下喜歡和關(guān)注，為了我能早日成為簡書簽約作者獻上一發(fā)助攻吧，謝謝！^ ^
