Canvas制作喷泉效果示例
Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
<title> Canvas制作喷泉</title>
<style type="text/css" media="screen"></style></head><body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script>var ctx = document.body.appendChild(document.createElement("canvas")).getContext('2d');
var i, j, k, a = [], w = ctx.canvas.width =$(window).width(), h = ctx.canvas.height = $(window).height(), r = Math.random, p = Math.PI;
setInterval(function(){ctx.fillStyle = "rgba(0, 0, 0, .5)";ctx.fillRect(0, 0, w, h);i = 10;while(i--){a.push({x:w/2,y:h/6,r:r()*3,c:"#fff",t:0,vx:r()*10-5,vy:r()*-5})}for(i = a.length-1;i >= 0;i--){k = a[i];ctx.fillStyle=k.c;ctx.beginPath();ctx.arc(k.x, k.y, k.r, 0, p*2)ctx.fill();k.x+=k.vx;k.y+=k.vy;k.vy+=.2;k.r -= .01;if(k.y>h){k.y=h;k.vy*=-.5;k.r+=.005;}k.r < 0 && a.splice(i, 1);}
}, 1000/60);</script>
</body>
</html>相关文章：
Canvas制作喷泉效果示例
Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例 效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <meta name"viewport" content"widthdevice-width, initial-scale1 ,user-…...
什么是NPM（Node Package Manager）？它的作用是什么？
聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...
oracle如果不适用toad或者plsql工具如何获取索引建表语句
select dbms_lob.substr(dbms_metadata.get_ddl(INDEX,INDEX_NAME,DIXON))||; from dba_indexes where ownerDIXON这个语句可以获取dixon用户的所有索引创建语句，sql脚本形式呈现 点开一个语句查看 如果不使用dbms_lob.substr这个函数最后得到是一个clob selec…...
某大厂伺服驱动器量产方案
本文介一款大厂量产伺服驱动器方案！带2500线省线式编码器，17位增量编码器，20位绝对值编码器！标配CANopen、高精度运动控制，高速总线通讯，主芯片28335FPGA，已验证过，带can和485通讯&a…...
【计算机网络】网络层：数据平面
一.网络层概述 每台路由器的数据平面的主要功能时从其输入链路向其输出链路转发数据报，控制平面的主要功能是协调这些本地的每路由转发动作，使得数据报沿着源和目的地主机之间的路由器路径最终进行端到端传送。 网络层不运行运输层和应用层协议。 转发是…...
Path with “WEB-INF“ or “META-INF“: [webapp/WEB-INF/NewFile.html]
2023-11-04 01:03:14.523 WARN 10896 --- [nio-8072-exec-6] o.s.w.s.r.ResourceHttpRequestHandler : Path with "WEB-INF" or "META-INF": [webapp/WEB-INFNewFile.html] spring.mvc.view.prefix:/webapp/WEB-INF/...
百度OCR 接口调用 提示 216101:param image not exist 问题解决
百度提供的文档并没有描述如何解决,例子也是,用工具请求可以通 axios 请求 需要用FormData 传参 let token await getAccessToken() //官网案例那个 请求token// console.log(token, "token");var formData new FormData();// imageBase64 :Base64 图片数据formD…...
1-10 HTML中input属性
HTML中input属性 text：用于接受单行文本输入password：用于密码输入，输入字符会被掩盖radio：用于单选按钮，用户可以在一组选项中选择一个checkbox：用于复选框，用户可以选择多个选项number&#…...
共焦显微镜使用
x.1 细胞培养 x.2 样品制备 以细菌为例，我们使用荧光染色细菌，静置15分钟。 15分钟后我们使用实验室的专用培养皿，选择吸收100uL的溶液滴在在培养皿中心。 x.3 显微镜使用 我们按照1, 2, 3, 4的顺序打开显微镜， 打开电脑&…...
windows + Mingw32-make 编译 PoDoFo库，openssl， libjpeg， Msys2工具的使用
参考： https://blog.csdn.net/sspdfn/article/details/104244306 https://blog.csdn.net/yaoyuanyylyy/article/details/17436303 https://blog.csdn.net/wxlfreewind/article/details/106492253 前期进行了各种摸索，由于Podofo依赖库比较多，…...
C++中图的存储
文章目录 0. 实例图1. 邻接矩阵2. 邻接矩阵2.1 链表数组2.2 链式前向星 3. 参考 0. 实例图 考虑下面这样一个图 1. 邻接矩阵 vis[i][j] 表示从i 到j有一条边。直接用二维数组就可以了。 using namespace std; int vertex_num 5; vector<vector<int>> graph(v…...
西瓜书读书笔记整理（七）—— 第七章 贝叶斯分类器
第七章 贝叶斯分类器 7.1 贝叶斯决策论（Bayesian Decision Theory）7.1.1 先验概率（Prior Probability）7.1.2 后验概率（Posterior Probability）7.1.3 似然度（Likelihood）7.1.4 决策规…...
C#WPF嵌套布局实例
本文演示C#WPF嵌套布局实例。演示了不同布局的简单用法，便于快速应用和掌握。 <Windowx:Class="LayoutDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/x…...
Spring和SpringMVC总结
一、Spring IoC(Inversion of Control)中文名称：控制反转（对象的创建交给Spring管理）。DI(dependency injection )依赖注入。容器（Container）：放置所有被管理的对象。beans：容器中所有被管理的对…...
C++标准模板（STL）- 类型支持 （类型属性，is_abstract，is_signed，is_unsigned）
类型特性 类型特性定义一个编译时基于模板的结构，以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为，除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…...
前端复制带上版权信息
前端复制带上版权信息 当用户复制内容时，自动添加版权信息。 HTML内容 <body><h1 inputmode"text">复制我</h1> </body>Js内容 document.addEventListener("copy", (event) > {event.preventDefault(); // 阻止…...
【ArcGIS微课1000例】0077：ArcGIS生成经纬网（shp格式）
使用ArcGIS制图的时候，可以很方便的生成经纬网、方里网及参考格网，但是在需要shp格式的经纬网，进一步在南方cass中使用经纬网的时候，就需要单独生成了。 如下图所示为全球大陆矢量数据，我们基于该数据来生成全球指定间距的经纬网数据。 在ArcGIS中，生成经纬网和方里网均…...
读程序员的制胜技笔记04_有用的反模式（下）
1. 重新发明轮子 1.1. 发明家的特质就是要用质疑的心态对待所有事物，你从未停下质疑，那你将不可避免地成为一个发明家 1.2. 并非所有的事情都有现成的轮子可以拿来用 1.3. 自己重新写一个新的API，最终调用你使用的库 1.3.1. 你的API应该是…...
linux驱动开发环境搭建
使用的是parallel 创建的ubuntu 16.04 ubuntu20.04虚拟机 源码准备 # 先查看本机版本 $ uname -r 5.15.0-86-generic# 搜索相关源码 $ sudo apt-cache search linux-source [sudo] password for showme: linux-source - Linux kernel source with Ubuntu patches linux-sourc…...
Qt利用VCPKG和CMake和OpenCV和Tesseract实现中英文OCR
文章目录 1. 开发平台2. 下载文件2.1 下载安装 OpenCV 库2.2 下载安装 Tesseract-OCR库2.3 下载训练好的语言包 3. CMakeLists.txt 内容4. Main.cpp4.1 中英文混合OCR 5. 在Qt Creator 中设置 CMake vcpkg5.1 在初始化配置文件里修改5.2 在构建配置里修改 说明：在Q…...
Day20力扣打卡
打卡记录 数组中两个数的最大异或值（位运算） 链接 二进制位上从高位向低位进行模拟，看数组中是否有满足此情况的数字。具体题解 class Solution { public:int findMaximumXOR(vector<int>& nums) {int mx *max_element(nums.be…...
设计模式之两阶段终止模式
文章目录 1. 简介 2. 常见思路3. 代码实战 1. 简介 两阶段终止模式（Two-Phase Termination Pattern）是一种软件设计模式，用于管理线程或进程的生命周期。它包括两个阶段：第一阶段是准备阶段，该阶段用于准备线程或进程…...
Dubbo捕获自定义异常
一.问题描述 Dubbo远程服务提供者抛出的自定义异常无法被消费方正常捕获，消费方捕获的自定义异常全部变成RuntimeException，使用起来很不方便。 二.原因分析 相关源码 /** Licensed to the Apache Software Foundation (ASF) under one or more* con…...
Leetcode刷题详解——求根节点到叶节点数字之和
1. 题目链接：129. 求根节点到叶节点数字之和 2. 题目描述： 给你一个二叉树的根节点 root ，树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数字： 例如，从根节点到叶节点的路径 1…...
emq集群配置nginx做负载均衡
emq集群配置nginx做负载均衡 创建 EMQ X 节点集群 emqx 集群搭建 例如: 节点IP 地址emqx192.168.1.17192.168.1.17emqx192.168.1.18192.168.1.18emqx192.168.1.19192.168.1.19 配置 /etc/nginx/nginx.conf mqtt集群搭建并使用nginx做负载均衡_亲测得结论 示例: vim /et…...
【JAVA学习笔记】60 - 坦克大战1.0-绘图坐标体系、事件处理机制
项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter16/src/com/yinhai 绘图坐标体系 一、基本介绍 下图说明了Java坐标系。坐标原点位于左上角，以像素为单位。在Java坐标系中，第一个是x坐标，表示当前位置为…...
Android13 安装谷歌GMS导致打开蓝牙失败解决方法
Android13 安装谷歌GMS导致打开蓝牙失败解决方法 文章目录 Android13 安装谷歌GMS导致打开蓝牙失败解决方法一、前言二、解决方法1、简单的解决方法2、添加属性和日志解决 三、分析1、查看异常日志2、 查看蓝牙相关日志 四、总结1、Android13 安装谷歌GMS导致打开蓝牙失败具体原…...
独创改进 | RT-DETR 引入双向级联特征融合结构 RepBi-PAN | 附手绘结构图原图
本专栏内容均为博主独家全网首发，未经授权，任何形式的复制、转载、洗稿或传播行为均属违法侵权行为，一经发现将采取法律手段维护合法权益。我们对所有未经授权传播行为保留追究责任的权利。请尊重原创，支持创作者的努力，共同维护网络知识产权。 文章目录 YOLOv6贡献RepBi-…...
Ubuntu下安装vscode，并解决终端打不开vscode的问题
Visual Studio Code安装 1，使用 apt 安装 Visual Studio Code 在官方的微软 Apt 源仓库中可用。按照下面的步骤进行即可： 以 sudo 用户身份运行下面的命令，更新软件包索引，并且安装依赖软件： sudo apt update sud…...
Spring Boot Actuator 漏洞利用
文章目录 前言敏感信息泄露env 泄露配置信息trace 泄露用户请求信息mappings 泄露路由信息heapdump泄露堆栈信息 前言 spring对应两个版本，分别是Spring Boot 2.x和Spring Boot 1.x，因此后面漏洞利用的payload也会有所不同 敏感信息泄露 env 泄露配置信…...