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
行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^
原文地址:https://www.jianshu.com/p/10002e8597bc
相关推荐
-
一文读懂Http Headers为何物(超详细) html5
2019-2-27
-
10 个你不知道你需要的 HTML 元素 html5
2019-5-11
-
HTMLCSSJS编码规范 html5
2017-12-11
-
小猿圈学习web之前端开发的感想和心得,以及经验 html5
2019-5-18
-
Http Header里的Content-Type html5
2019-9-15
-
重学 html の 标签语义化 html5
2019-5-4
-
前端的性能优化(针对内容方面) html5
2019-5-3
-
那些你不知道的meta标签 html5
2019-1-1
-
H5手机端开发问题汇总及解决方案 html5
2018-4-10
-
利用 socket.io 实现消息实时推送 html5
2017-12-10