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