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…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...