Canvas 让你的屏幕下一场 Hacker 流星雨吧
Canvas 让你的屏幕下一场 Hacker 流星雨吧
Nian糕
修改于 2024-03-16 17:06:26
修改于 2024-03-16 17:06:26
正如标题所提到的，我们使用到了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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.09.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读