Canvas实现黑客帝国字符雨_canvas画字符雨-程序员宅基地
利用Canvas的fillText(),隔一定时间在画布上作画
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden
}
</style>
</head>
<body>
<canvas id='canvas' style='background:#111'></canvas>
<script>
canvas = document.getElementById('canvas')
context = canvas.getContext('2d')
//定义画布大小，字体，颜色
var W = window.innerWidth
var H = window.innerHeight
canvas.height = H
canvas.width = W
var fontSize = 16
var colunms = Math.floor(W / fontSize)
var drops = [] //drops中是每列字母y坐标的倍数
for (let i = 0; i < colunms; i++) {
drops.push(1000)
}
var str = 'qwertyuiopasdfghjklmnbvcxzQWERTYUIOPLKJHGFDSAZXCVBNM0123456789'
function draw() {
//每次draw()，设置透明度可以显示上一次draw()的图像，形成残影
context.fillStyle = 'rgba(0, 0, 0, 0.05)'
context.fillRect(0, 0, W, H)
context.font = '1000 ' + fontSize + 'px Consolas'
context.fillStyle = '#00cc33'
context.textAlign = 'center'
for (let i = 0; i < colunms; i++) {
let index = Math.floor(Math.random() * str.length)
let x = i * fontSize
let y = drops[i] * fontSize
//在x,y坐标中随机画str中的一个字符
context.fillText(str[index], x, y)
//y大于画布高度后，设置随机数，规定是否从顶点重新开始画
if (y >= H && Math.random() > 0.99) {
drops[i] = 0
}
//每次draw()后，倍数加一，下一个字符画在它的下方
drops[i]++
}
}
window.onload = function () {
setInterval(draw, 50)
}
</script>
</body>还可以设置字体的随机颜色，使动画更绚丽
添加randColor函数，并更改draw
function draw() {
context.fillStyle = 'rgba(0, 0, 0, 0.05)'
context.fillRect(0, 0, W, H)
context.font = '1000 ' + fontSize + 'px Consolas'
context.textAlign = 'center'
for (let i = 0; i < colunms; i++) {
context.fillStyle = randColor()
let index = Math.floor(Math.random() * str.length)
let x = i * fontSize
let y = drops[i] * fontSize
context.fillText(str[index], x, y)
if (y >= H && Math.random() > 0.99) {
drops[i] = 0
}
drops[i]++
}
}
function randColor() {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
智能推荐
FortiGate防火墙500D下PC至外网丢包-程序员宅基地
文章浏览阅读235次。1.现状：如图，防火墙堆叠，500D共4个出口方向，联通、电信、FQ、运维专线2.现象： 到网关和防火墙上、下联口不丢包，到网联通和运维专线方向丢包4%左右，电信和FQ方向不丢包 3.分析 采用从上向下的方式，一点点加网络设备。如先测试运营商，若没问题加防火墙，若没问题加上网行为管理，以此类推。4.排查 去除防火墙，PC直连运营商光猫，不丢包，排除运..._fortigate 掉线
VisualStudio安装以及与Unity3d关联使用_unity和vs关联-程序员宅基地
文章浏览阅读4.8k次，点赞6次，收藏29次。问题：1、正确VisualStudio下载安装，以及后期添加或删除VS内容组件、更新恢复VS、以及正确卸载VS等。2、Unity3d里的C#脚本，编辑代码时，还是一个字母一个字母输入，没有api等函数或错误智能显示提示（顶多个别词和符号下面显示红色波浪线）。3、Unity3d里的C#脚本，在打开时总是用Visual Studio Tools for Unity 2.0打开，而不是用Visual Studio打开。_unity和vs关联
了解BFC_b 'i jkfccfdd 。/-程序员宅基地
文章浏览阅读76次。在学习css盒子布局过程中，会出现盒子塌陷问题，在解决这些问题时，看到BFC的特性，并可以解决这方面的问题，本文是简单对BFC的总结。1、什么是BFC BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。..._b 'i jkfccfdd 。/
java爬取双色球所有中奖号码历史数据-程序员宅基地
文章浏览阅读3.7k次。org.jsoup是一个用于解析、操作和遍历HTML文档的Java库。它提供了简单易用的API，使得开发者能够方便地从HTML中提取数据、修改HTML内容、进行选择器查询等操作。下面对org.jsoup的主要功能进行详细解释。
[ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务_s3存储安装-程序员宅基地
文章浏览阅读5.8k次，点赞55次，收藏42次。MinIO 是一个高性能的对象存储系统。它被设计为云原生存储系统的替代方案。事实上，其 API 与 Amazon S3 完全兼容；MinIO 也提供兼容阿里云等国内云厂商的 API，由于本文篇幅问题，在本博文中，只介绍亚马逊 AWS 与其关联的案例以及如何快速使用 MinIO。Minio 是 GlusterFS 创始人之一 Anand Babu Periasamy 发布新的开源项目。MinIO 从一开始就被设计为完全兼容 Amazon S3 存储 API 的替代方案。_s3存储安装
jackson出现错误 Unrecognized field，几种处理方法_unrecognized field "crspool" (class com.ctyun.prob-程序员宅基地
文章浏览阅读5.5w次，点赞4次，收藏8次。错误堆栈信息如下:org.codehaus.jackson.map.exc.UnrecognizedPropertyException: Unrecognized field "HPYS" (Class com.traffic.entity.BusBaseInfo), not marked as ignorable at [Source: java.io.StringReader@76c5f_unrecognized field "crspool" (class com.ctyun.probe.cmdbinfo), not marked as
随便推点
SAP SMARTFORMS打印设置默认LP01格式打印_sap lp01-程序员宅基地
文章浏览阅读525次。1.设置默认打印格式并不是再代码里写，而是跟用户绑定。2.输入事务码SU01。_sap lp01
Kubernetes Service与Ingress详解_ingresses service-程序员宅基地
文章浏览阅读1.1w次，点赞17次，收藏89次。Service 的概念：Kubernetes Service定义了这样一种抽象：一个Pod的逻辑分组，一种可以访问它们的策略 —— 通常称为微服务。这一组Pod能够被Service访问到，通常是通过Label Selector。一、Service 的概念、二、Service 的类型、三、VIP 和 Service 代理、四、ipvs代理模式、五、Service实验讲解、六、Ingress实验讲解_ingresses service
高效Web开发的10个jQuery代码片段-程序员宅基地
文章浏览阅读367次。在过去的几年中，jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段，有需要的开发者可以保存起来。 1、检 测Internet Explorer版本当涉及到CSS设计时，对开发者和设计者而言Internet Explorer一直是个问题。尽管IE6的黑暗时代已经过去，IE也越来越不流行，它始终是一个能够容易检测的好东西。当
公司感染勒索病毒怎么办 怎样及时补救？-程序员宅基地
文章浏览阅读2.3w次。什么是勒索病毒勒索病毒，简单来说就是黑客用来劫持用户数据资料，索取巨额赎金的武器。因为对企业用户造成的损失更加巨大，勒索病毒一出现就引起了广大企业用户以及安全厂商的高度重视。这种病毒主要通过漏洞、邮件和广告推广进行传播，利用各种加密算法对文件进行加密，必须拿到密钥才有可能破解，从而向受害者索要数额不等的赎金后才予以解密。该病毒性质恶劣、危害极大，变种类型非常快，对常规的杀毒软件都具有免疫性，一...
Nginx 开启 IPv6 Nginx 开启 IPv6 SSL_nginx 支持ipv6版本-程序员宅基地
文章浏览阅读2.3k次，点赞2次，收藏5次。Nginx 开启IPv6,Nginx 开启IPv6 SSL,IPv6支持http,IPv6支持https_nginx 支持ipv6版本
空间关系_空间数据库touch，inside关系-程序员宅基地
文章浏览阅读3.2k次。基于维度扩展九交模式(Dimensionally Extended 9-Intersection Model，DE-9IM)，MapGuide定义了如表8-3所示的11种空间关系，其中8种是OGC简单要素规范所定义的空间关系，另外3种FDO中自定义的空间关系。 空间关系中文名称OGC标准解释Contains_空间数据库touch，inside关系