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…...
LeetCode 2946. 循环移位后的矩阵相似检查【数学周期性+原地比较】简单
本文属于「征服LeetCode」系列文章之一，这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁，本系列将至少持续到刷完所有无锁题之日为止；由于LeetCode还在不断地创建新题，本系列的终止日期可能是永远。在这一系列刷题文章…...
掌握Nemo文件管理器：Cinnamon桌面环境的高效文件管理利器
掌握Nemo文件管理器：Cinnamon桌面环境的高效文件管理利器 【免费下载链接】nemo File browser for Cinnamon 项目地址: https://gitcode.com/gh_mirrors/ne/nemo Nemo作为Cinnamon桌面环境的默认文件管理器，不仅仅是一个简单的文件浏览器…...
告别SQLite！用ObjectBox为Flutter应用打造高性能本地存储（含常见报错解决方案）
告别SQLite！用ObjectBox为Flutter应用打造高性能本地存储（含常见报错解决方案） 在移动应用开发中，本地数据存储方案的选择直接影响着用户体验和应用性能。对于Flutter开发者来说，SQLite长期以来都是默认选择࿰…...
ThinkPad装Win10企业版后，手把手教你用PowerShell搞定Lenovo Vantage（附依赖包下载）
ThinkPad安装Win10企业版后手动部署Lenovo Vantage的完整指南 当你在ThinkPad上安装了纯净的Windows 10企业版系统后，可能会发现无法通过常规方式安装Lenovo Vantage这款官方管理工具。本文将详细介绍如何通过PowerShell命令手动安装Lenovo Vantage及其所有必需的依…...
MAX30102传感器总是不准？Arduino避坑指南：从焊接绝缘到手指摆放的5个关键细节
MAX30102传感器精度优化全攻略：从硬件调试到算法校准的完整解决方案 MAX30102作为一款高集成度生物传感器，在心率、血氧监测领域应用广泛，但许多开发者在Arduino平台上使用时常遇到数据不稳定、测量偏差大的问题。本文将系统性地剖析影响测量…...
bert-base-chinese新手教程：从零开始学习中文预训练模型部署与使用
bert-base-chinese新手教程：从零开始学习中文预训练模型部署与使用 1. 认识bert-base-chinese模型 1.1 什么是BERT模型 BERT（Bidirectional Encoder Representations from Transformers）是Google在2018年发布的预训练语言模型。它通过大规…...
「webMAN-MOD」技术探索：构建PS3主机的多功能扩展生态
「webMAN-MOD」技术探索：构建PS3主机的多功能扩展生态 【免费下载链接】webMAN-MOD Extended services for PS3 console (web server, ftp server, netiso, ntfs, ps3mapi, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webMAN-MOD 一、基础认知&…...
PADS 9.5资源包下载与安装教程：附最新许可证生成工具MentorKG使用指南
PADS 9.5完整资源获取与高效安装实战指南 在电子设计自动化（EDA）领域，PADS系列软件凭借其稳定的性能和友好的操作界面，始终保持着广泛的市场占有率。作为经典的9.5版本，虽然已不是最新发布，但在许多企业的标…...
Llama-3.2V-11B-cot入门必看：Streamlit组件热重载加速UI迭代开发
Llama-3.2V-11B-cot入门必看：Streamlit组件热重载加速UI迭代开发 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B多模态大模型开发的高性能视觉推理工具，专为双卡4090环境深度优化。该工具通过Streamlit框架构建了直观易用的交互界面&#…...
如何为Obsidian插件添加多语言支持：终极国际化指南
如何为Obsidian插件添加多语言支持：终极国际化指南 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 如果你正在寻找一款能够帮助你的Obsidian插件突破语言限制的工具，那么Obsidian-i18n正是你需要的…...