代码流星雨

2023-11-11

什么是html?

html就是前端可以理解成为网页界面

不会但是想玩?

可以在电脑桌面上建一个记事本然后把代码复制后粘贴在记事本里面 然后保存最后吧记事本(新建文本文档.tx)的后缀(就是重命名)改成html(新建文本文档.html)

来自html的小惊喜好了先康康效果吧

 怎么样很不错八 下面把代码分享给大家大家阔以把代码复制过去然后粘贴过去就行了

<!doctype html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>流星雨</title>
  <meta name="keywords" content="关键词,关键字">
  <meta name="description" content="描述信息">
  <style>
   body {
    margin: 0;
    overflow: hidden;
   }
  </style>
 </head>
 
 <body>
 
  <!--
   <canvas>画布 画板 画画的本子
  -->
  <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>
 
  <!--
   javascript
   画笔
  --> 
  <script>
     
   //获取画板
   //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<clos;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 = "#00ff00";
 
    for(var i = 0;i<clos;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);
  </script>
 </body>
</html> 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

代码流星雨 的相关文章

  • 框架可以用什么代替?

    假设我有一个包含 50 个网页的网站 每个页面由 A Header 导航 左侧内容 右侧内容 Footer 不使用 Frames 服务器端编程 第三方工具和软件 构架 我需要将这 5 个部分的代码 HTML 标记 分别放入这 50 个页面中
  • 输入和文本区域可以拖动吗?

    MDN 规范以及我能通过 Google 找到的每个网站都说所有 HTML 元素都可以拖动 然而 在实践中 我发现我无法拖动文本输入或文本区域 即使它们已被禁用 例如 使用以下代码 img src http www placehold it
  • 为什么对于大于 65776 像素的画布源,drawImage 性能差异很大

    我在 jsperf 上写了一些与以下相关的测试用例 1 在屏幕外画布上绘图 2 将图像绘制到屏幕画布上 我发现如果源画布中的像素数 无论 dst 小于 65776 像素 性能会高得多 我预计这个性能限制是 65536 像素 如果有的话 He
  • 黑色左/右三角形大小不同

    我使用黑色左指三角形 右左指三角形几何形状作为网站上的链接 并使用它们的 HTML 代码 和 9664 9654 由于某种原因 即使我在没有其他元素的空白页面上使用三角形 它们也不会以相同的大小显示 在 Chrome 上 向左指向的位置比向
  • 复选标记的 HTML 实体[重​​复]

    这个问题在这里已经有答案了 是否有用于复选标记的 HTML 实体 我在各种 html 实体备忘单中搜索过它 但没有找到 像这样的东西吗 如果是这样 请输入 HTML 10004 And 10003 给出一个更轻的
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • 如何在 iframe 加载时向页面添加加载指示器?

    我当前正在创建一个页面 单击链接后 iframe 将插入到 div 中并加载其内容 我使用以下 jQuery 调用来执行此操作 mydiv html 有时会加载源内容very慢慢地 结果看起来什么也没有发生 我希望在 iframe 内容加载
  • JavaScript 中的 jstl

    可以在javascript中使用jstl吗 我正在绑定设置
  • IndexedDB - 对象存储与多个数据库与索引?

    我想知道什么时候使用单个数据库与具有多个对象存储的数据库是一个好主意 我阅读了网络上的大多数教程并查看了 indexedDB 的规范 但找不到比较这些不同概念的好例子 有没有人有此类事情的具体示例 使用多个对象存储和 或代码的设计模型 只要
  • Firefox 上的 Angular JS 输入日期

    我有这些输入和这个模型
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • 有没有办法根据渲染的字符串创建 DOM 对象?

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 如何从 Javascript/Typescript 中的数组对象计算运行总计并使用 HTML 在每个实例上显示输出?

    我正在开发一个 MEAN 堆栈项目 并且有一个如下所示的数组 savings any 300 450 350 500 我还有一个名为 saving bf 的变量 它是从数据库中检索的结转储蓄 其值如下 savings bf 15000 我想
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • HttpWebRequest vs Webclient(特殊场景)

    我知道这个问题之前已经回答过thread https stackoverflow com questions 1694388 webclient vs httpwebrequest httpwebresponse 但我似乎找不到详细信息 在
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这

随机推荐

  • OpenWrt源码目录

    分析的OpenWrt源码目录有助于分析OpenWrt的源码 一 原始目录 1 1 scripts 构建期间用到的各类脚本文件 它存放了一些脚本 使用了bash python perl等多种脚本语言 编译过程中 用于第三方软件包管理的feed
  • 开关稳压器详解(四)-Buck降压型开关稳压器自举电路

    在Buck开关中 常使用N MOS管作为功率开关管 相比于P MOS N MOS具有导通电阻低价格便宜且流过电流较大等优势 在同步结构中对于开关管的使用一般有两种方式 上管为P MOS 下管为N MOS 无需外部自举电路 上下管均为N MO
  • 建立任务,OSTaskCreate()源码解析

    想让uC OS 管理用户的任务 用户必须要先建立任务 用户可以通过传递任务地址和其它参数到以下两个函数之一来建立任务 OSTaskCreate 或 OSTaskCreateExt OSTaskCreate 与uC OS是向下兼容的 OSTa
  • matlab通过两点画线问题&&plot,line的用法和区别。

    先马 1 LINE并不等同于PLOT 我查过HELP 很多属性不同 2 对与外框的问题 PLOT可以用法BOX控制 LINE无外框 3 图形删除的问题 PLOT可用HOLD ON或OFF控制 LINE要是用DELET 因此建议使用PLOT
  • 尾行3解3D马赛克补丁

    尾行3解3D马赛克补丁 尾行3下载尾行3补丁尾行3图片尾行3去马赛克尾行3怎么玩尾行3下载尾行3视频illusion尾行3秘籍尾行3攻略秘籍 尾行3作弊单机游戏尾行3下载尾行3外挂尾行3对话单机游戏尾行3 尾行3中文补丁 尾行3黑屏补丁尾行
  • M1 Mac 安装Python及相关库|pytorch安装M1 Mac

    今天安装pytorch的时候发现安装的anaconda是x86版本的 自己的电脑是arm64架构的 所以一直安装不上 之后找到一个方法 以后可以通过命令行直接安装在arm64上运行的库了很方便 1 安装homebrew 这是一个mac上的包
  • 编译opencv.js

    opencv 支持编译多个平台 其中还支持JavaScript 不过编译需要emscripten 编译环境 centos7 Python2 7 1 下载OpenCV源码 官网 https opencv org releases 例如下载4
  • Docker如何安装seafile

    SQLite 方式 要在 Docker 中安装 Seafile 您可以按照以下步骤进行操作 安装 Docker 确保您的系统上已经安装了 Docker 您可以根据您的操作系统类型 在官方网站上找到适合您系统的 Docker 版本并进行安装
  • 数字化转型的趋势、挑战与战略【一】

    在全球经济进入数字化转型时期 数字化转型已成为传统企业必须付诸行动的必选题 企业为什么要进行数字化转型 如何把握数字化转型的时机 近日 在大华南IT高管共赢圈 大华南IT培训学院联合举办的 企业数据化转型的战略与规划 培训会上 IDC中国副
  • PyTorch:梯度计算之反向传播函数backward()

    一 计算图 计算图 是一种用来描述计算的有向无环图 我们假设一个计算过程 其中 X 1 mathbf X 1 X1 W 1
  • cmd更换主题配色

    cmd更换主题配色 去github下载colortool 地址 使用管理员打开cmd进入解压后的文件夹 执行命令 colortool exe b solarized light itermcolors 其他可选方案在schemes下 更换效
  • java反射基础巩固

    反射机制是在运行状态中 对于任意一个类 都能够知道这个类的所有属性和方法 对于任意一个对象 都能够调用它的任意一个方法和属性 这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制 一直以来反射技术都是Java中的闪亮点
  • 反射和多线程基础

    一 今日内容 1 1 课程回顾 1 2 反射是啥 1 3 进程和线程 1 4 线程的创建方式 1 5 线程的状态 1 6 线程的常用方法 二 课程回顾 Java的基本语法 1 数据类型 基本 引用 2 运算符 算术 逻辑 比较 赋值 位 三
  • 掌握的几种禁止转换八进制,十进制,十六进制

    1 十进制 除表示正负的符号外 以1 9开头 由0 9组成 如 128 234 278 2 八进制 以0开头 由0 7组成的数 如 0126 050000 3 十六进制 以0X或0x开头 由0 9 A F或a f 组成 如 0x12A 0x
  • 实训周笔记

    主机信息收集技术 基础知识 主要收集目标主机的相关信息 主要包括端口 服务 漏洞等信息 信息收集手段多样 可借助工具也多种多样 端口扫描 Nmap 主机信息收集技术 Nmap namp 192 168 1 1 namp A T4 v 192
  • proteus 问题--解决创建项目、打开项目:Error opening VSM Studio project STM32F401VE,无法查看Source Code,无法创建硬件项目

    问题描述 原因 安装软件的路径有中文 删掉所有东西后 重新下载即可 创建新项目 点击New Project 选择GCC for ARM这个配置项 也可以进入后在配置
  • qt如何触发点击事件_PyQt5事件处理机制(一)

    基于窗体的应用程序都是事件 event 驱动的 鼠标单击 按下某个按键 重绘某个组件 最小化窗口都会产生相应的事件 应用程序对这些事件作出相应的处理以实现程序的功能 常用的特定事件处理函数及方法示例代码 from PyQt5 Qt impo
  • 解读 Q_D, Q_Q 指针

    见 qglog h文件定义 define Q D Class Class Private const d d func define Q Q Class Class const q q func d指针是在主类中使用的 来获取私有子类成员指
  • STM32HAL库软件模拟SPI驱动0.96OLED屏幕,F1、F4系列通用,6pin和7pin模块通用

    本实验通过网上搜集的资料 整理出HAL库的SPI驱动 为了方便移植 选择采用软件模拟SPI通信来驱动OLED 本实验使用的OLED为7pin 默认通信模式为SPI 可以更改板上电阻更换为IIC模式 屏幕驱动芯片为SSD1306 模块简介 6
  • 代码流星雨

    什么是html html就是前端可以理解成为网页界面 不会但是想玩 可以在电脑桌面上建一个记事本然后把代码复制后粘贴在记事本里面 然后保存最后吧记事本 新建文本文档 tx 的后缀 就是重命名 改成html 新建文本文档 html 来自htm