Canvas 让你的屏幕下一场 Hacker 流星雨吧

Invasion of the Pentagon

今天来分享一个很狂拽酷炫吊炸天的特效，其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图（手动滑稽），实现起来很简单，跟着动手一起来吧

正如标题所提到的，我们使用到了 canvas 元素，你可以理解为是一张画布，有了画布之后，我们就要在画布上进行绘制，而 canvas 元素本身是不具备绘图能力的，所以我们要借助 JavaScript 来完成绘制工作

HTML 的结构我们只需要一个 <canvas> 标签就够了，若是在低版本的浏览器中，我们还是要提醒一下浏览器需要升级了

<canvas id="canvas">
    IE这种上古神器居然还有人在用？？
</canvas>

设置全局 CSS 样式，很简单，代码如下：

*{margin:0px;padding:0px;}
body{overflow:hidden;}

获取浏览器屏幕并设置其宽高，设置一个包含 256 个空元素的数组，.join("1") 用 1 来把数组里的元素拼接为字符串，.split("") 过滤掉数组里的空元素

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";
    //数组元素的映射
    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);

运行结果

这里我们还可以将填充绘图的颜色修改成随机颜色，而颜色值是十六进制数，其范围是 000000 - FFFFFF，转换为十进制是 0 - 16777215，所以我们通过随机数生成在这个范围内的色值，当然最后还是要转成十六进制，不要忘记在色值前面加 # 号 ，一共有三种方法，代码如下所示：

// 方法一
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))
}

运行结果

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^