手机编程html流星代码,如何使用html实现流星雨的效果(代码)
本篇文章给大家带来的内容是关于如何使用html实现流星雨的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
流星雨
body {
margin: 0;
overflow: hidden;
}
//获取画板
//doccument 当前文档
//getElement 获取一个标签
//ById 通过Id名称的方式
//var 声明一片空间
//var canvas 声明一片空间的名字叫做canvas
var canvas = document.getElementById("canvas");
//获取画板权限 上下文
var ctx = canvas.getContext("2d");
//让画板的大小等于屏幕的大小
/*
思路:
1.获取屏幕对象
2.获取屏幕的尺寸
3.屏幕的尺寸赋值给画板
*/
//获取屏幕对象
var s = window.screen;
//获取屏幕的宽度和高度
var w = s.width;
var h = s.height;
//设置画板的大小
canvas.width = w;
canvas.height = h;
//设置文字大小
var fontSize = 14;
//计算一行有多少个文字 取整数 向下取整
var clos = Math.floor(w/fontSize);
//思考每一个字的坐标
//创建数组把clos 个 0 (y坐标存储起来)
var drops = [];
var str = "qwertyuiopasdfghjklzxcvbnm";
//往数组里面添加 clos 个 0
for(var i = 0;i
drops.push(0);
}
//绘制文字
function drawString() {
//给矩形设置填充色
ctx.fillStyle="rgba(0,0,0,0.05)"
//绘制一个矩形
ctx.fillRect(0,0,w,h);
//添加文字样式
ctx.font = "600 "+fontSize+"px 微软雅黑";
//设置文字颜色
ctx.fillStyle = "#ff2d2d";
for(var i = 0;i
//x坐标
var x = i*fontSize;
//y坐标
var y = drops[i]*fontSize;
//设置绘制文字
ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
if(y>h&&Math.random()>0.99){
drops[i] = 0;
}
drops[i]++;
}
}
//定义一个定时器,每隔30毫秒执行一次
setInterval(drawString,30);
相关推荐:
手机编程html流星代码,如何使用html实现流星雨的效果(代码)相关推荐
- html视频滑动抖音代码,抖音 - 分享代码,大鱼海棠,片段滚动效果代码!
看到很多朋友留言想要代码,这边分析一个压缩包! 我的抖音号:157680338 html> 抖音玩着玩 @keyFrames move{ 0%{ transform: translateY(30 ...
- html显示滚动焦点图代码,商城常用滚动的焦点图效果代码简单实用
这种商城的效果网上很多,但大多是插件,要么JS写的太过于复杂,对于学习的童鞋来说看起来比较费劲,这个看起来比较简单,也比较容易理解,各位童鞋需要的请围观,也欢迎各位评价,贴代码(为方便使用,代码复制即 ...
- android 纯代码选项卡,纯javascript实现tab选项卡效果代码
提示:您可以先修改部分代码再运行 买家中心 卖家中心 待处理订单(10) 待确定订单(本月购买额度17826.35元(返20元) 本年购买额度您的购买金额排第1名,奖励100元! 待处理订单(10) ...
- html 设置流星效果,如何使用html实现流星雨的效果(代码)
本篇文章给大家带来的内容是关于如何使用html实现流星雨的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 流星雨 body { margin: 0; overflow: ...
- 代码制作数字流星雨_如何运用html完成流星雨的效果(代码)
软件安装:装机软件必备包 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言.公共网关接口.组件等),可以创造出功能强大的网页.因而,超级文本标记语言是万维网(Web)编程的基 ...
- c++编写手机小游戏代码_手机也能编程?盘点这6个可以用手机编程的App!快收藏!...
传智播客博学谷 加小谷vx:boxueguu 免费领IT各学科资料.课程 Get更多干货直播课 前两天整理了一些边玩游戏边学编程的网站,今天再给大家推荐几个手机上编码的app!学编程,最方便的肯定是电 ...
- 手机下载Python_手机也能编程?盘点这6个可以用手机编程的App!快收藏
学编程,最方便的肯定是电脑啦.但是有很多时候电脑没办法带电脑怎么学习编程呢?小谷在网上整理了一些: 简单几个可以在手机上编程的软件,主要分为C/C++,Java,Python,前端网页,Linux这5 ...
- python手机版编程-可以使用手机编程实现python吗
这里介绍2个在可以在手机上编程Python的软件,一个是QPython3,一个是Termux,其中QPython3集成了Python3解释器,可以直接编写运行Python程序,Termux类似于一个手 ...
- python 手机编程termux_如何优雅的在手机上进行Python编程?
其实谈不上优雅,编程还是老老实实在电脑编程更实用,手机只是某种程度上做一些便捷性的操作. 回到主题,下面介绍两个常用的Python编程工具. 第一款:Termux Termux是一个安卓手机的 Lin ...
最新文章
- Shader 坐标转换
- 开发linux版QQ就是支持未来的国产操作系统
- java dvd集合框架_JAVA 集合框架
- gis如何加入emf图片_ArcGIS教程:地图导出格式,教你如何选择
- 全国省市区信息,mysql数据库记录
- png在线转换透明ICO
- JPEG编码压缩率调整
- vue项目使用eslint和prettier格式化项目
- html5 自动触发事件,HTML5视频触发事件触发一次
- 算法实践:数独(3)
- JAVA自学材料大全与技术路线
- 线程池原理初探以及源码分析(详解)
- 用ESP32与Python实现物联网(IoT)火焰检测报警系统
- 汽车电子学习笔记 --- IAR
- 计算机论文结束语致谢,论文结束语和致谢
- 2008中国十佳IC设计公司(二):土鳖博士创业一样成功
- 变分(Calculus of variations)的概念及运算规则(一)
- 2022 年超详细过程步骤讲解 CentOS 7 安装Maven。以及Mavne配置文件的修改
- kstest 检验数据是否符合正态分布
- 最全面的垂直搜索引擎统计-行业搜索--垂直搜索
热门文章
- android+后台自动更新+上架,Android增量自动更新
- bashne java_bash脚本中 if 语句 和 for 语句使用方法
- QString自动补全
- ajax读取文件数据,Ajax 实现读取 properties 格式资源文件数据
- 2019 拼多多校招第三题sum 服务端研发工程师
- rt3290+linux驱动下载,Ralink雷凌RT3290蓝牙驱动
- 微信表情的字符编号完整版【图文并茂哦!】
- AtCoder Beginner Contest 168 C~D题解
- 组合数C(n,m)的四种计算方法
- 微信小程序 保存图片 wx.saveImageToPhotosAlbum