canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
类别:Web前端 浏览量:1073
时间:2021-10-11 00:33:45 canvas绘制流星
使用canvas实现黑客帝国数字雨效果使用canvas实现黑客帝国数字雨
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <canvas style="background:#111"></canvas> <script> //获取画布对象 var can = document.querySelector("canvas"); //获取画布的上下文 var ctx = can.getContext("2d"); //设置canvas的宽度和高度 can.width = window.innerWidth; can.height = window.innerHeight; //每个文字的字体大小 var fontSize = 16; //计算列 var colunms = Math.floor(window.innerWidth / fontSize); //记录每列文字的y轴坐标 var arr = []; //给每一个文字初始化一个起始点的位置 for (var i = 0; i < colunms; i++) { arr.push(0); } //运动的文字 var str = "you are a silly"; //绘画的函数 function draw() { //布满全屏的黑色遮罩层 ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); //给字体设置样式 ctx.font = "700 " + fontSize + "px 微软雅黑"; //给字体添加颜色 ctx.fillStyle = "#00cc33"; //写入画布中 for (var i = 0; i < colunms; i++) { var index = Math.floor(Math.random() * str.length); var x = i * fontSize; var y = arr[i] * fontSize; ctx.fillText(str[index], x, y); //如果文字的Y轴坐标大于画布的高度,1/100*colunms概率将该文字的Y轴坐标重置为0 if (y >= can.height && Math.random() > 0.99) { arr[i] = 0; } //文字Y轴坐标+1 arr[i]++; } } draw(); setInterval(draw, 30); </script> </body> </html>
总结
以上所述是小编给大家介绍的使用canvas实现黑客帝国数字雨效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- html5canvas动画(html5 canvas 实现光线沿不规则路径运动)
- html判断canvas已经绘制过了(html2canvas截图空白问题的解决)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- canvas如何保存当前的图片(canvas如何实现多张图片编辑的图片编辑器)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- canvas时钟代码(canvas实现烟花的示例代码)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- canvas绘制渐变图形(Canvas实现放大镜效果完整案例分析附代码)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
热门推荐
- 海外云服务器租用要怎么选择?(海外云服务器租用要怎么选择?)
- python的log函数(Python3 log10函数简单用法)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- yield方法可以使一个线程停止运行(Yii2.0框架模型添加/修改/删除数据操作示例)
- pythonjson库(Python常用的json标准库)
- mongodb query查询
- tomcat解决乱码(解决tomcat 静态页面html中文乱码的解决终极篇)
- dockermysql配置详解(Docker 部署Mysql 服务和Redis 服务的方法)
- python八卦图(Python实现九宫格式的朋友圈功能内附“马云”朋友圈)
- centos上docker的部署(CentOS8下的Docker使用详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9