技术栈

主页 > 前端开发 >

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

Invasion of the Pentagon

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 Hacker meteor shower 上了,有需要的同学可自行下载

End of File

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

责任编辑:admin  二维码分享:
本文标签: letrandomctxMathcolorcanvas
点击我更换图片

评论列表