当前位置：首页 > news >正文

Canvas制作喷泉效果示例

news 2026/2/8 23:13:31

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-…...

编程日记 2023/11/5 9:45:19

什么是NPM（Node Package Manager）？它的作用是什么？

聚沙成塔每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

编程日记 2023/11/5 9:42:15

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…...

编程日记 2023/11/5 9:41:14

某大厂伺服驱动器量产方案

本文介一款大厂量产伺服驱动器方案！带2500线省线式编码器，17位增量编码器，20位绝对值编码器！标配CANopen、高精度运动控制，高速总线通讯，主芯片28335FPGA，已验证过，带can和485通讯&a…...

编程日记 2023/11/5 9:40:12

【计算机网络】网络层：数据平面

一.网络层概述每台路由器的数据平面的主要功能时从其输入链路向其输出链路转发数据报，控制平面的主要功能是协调这些本地的每路由转发动作，使得数据报沿着源和目的地主机之间的路由器路径最终进行端到端传送。网络层不运行运输层和应用层协议。转发是…...

编程日记 2023/11/5 9:38:10

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/...

编程日记 2023/11/5 9:37:09

百度OCR 接口调用提示 216101:param image not exist 问题解决

百度提供的文档并没有描述如何解决,例子也是,用工具请求可以通 axios 请求需要用FormData 传参 let token await getAccessToken() //官网案例那个请求token// console.log(token, "token");var formData new FormData();// imageBase64 :Base64 图片数据formD…...

编程日记 2023/11/5 9:36:08

1-10 HTML中input属性

HTML中input属性 text：用于接受单行文本输入password：用于密码输入，输入字符会被掩盖radio：用于单选按钮，用户可以在一组选项中选择一个checkbox：用于复选框，用户可以选择多个选项number&#…...

编程日记 2023/11/5 9:35:07

共焦显微镜使用

x.1 细胞培养 x.2 样品制备以细菌为例，我们使用荧光染色细菌，静置15分钟。 15分钟后我们使用实验室的专用培养皿，选择吸收100uL的溶液滴在在培养皿中心。 x.3 显微镜使用我们按照1, 2, 3, 4的顺序打开显微镜， 打开电脑&…...

编程日记 2023/11/5 9:32:03

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依赖库比较多&#xff0c…...

编程日记 2023/11/5 9:31:02

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…...

编程日记 2023/11/5 9:30:00

西瓜书读书笔记整理（七）—— 第七章贝叶斯分类器

第七章贝叶斯分类器 7.1 贝叶斯决策论（Bayesian Decision Theory）7.1.1 先验概率（Prior Probability）7.1.2 后验概率（Posterior Probability）7.1.3 似然度（Likelihood）7.1.4 决策规…...

编程日记 2023/11/5 9:28:59

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…...

编程日记 2023/11/5 9:27:58

Spring和SpringMVC总结

一、Spring IoC(Inversion of Control)中文名称：控制反转（对象的创建交给Spring管理）。DI(dependency injection )依赖注入。容器（Container）：放置所有被管理的对象。beans：容器中所有被管理的对…...

编程日记 2023/11/5 9:26:56

C++标准模板（STL）- 类型支持（类型属性，is_abstract，is_signed，is_unsigned）

类型特性类型特性定义一个编译时基于模板的结构，以查询或修改类型的属性。试图特化定义于 <type_traits> 头文件的模板导致未定义行为，除了 std::common_type 可依照其所描述特化。定义于<type_traits>头文件的模板可以用不完整类型实例…...

编程日记 2023/11/5 9:25:55

前端复制带上版权信息

前端复制带上版权信息当用户复制内容时，自动添加版权信息。 HTML内容 <body><h1 inputmode"text">复制我</h1> </body>Js内容 document.addEventListener("copy", (event) > {event.preventDefault(); // 阻止…...

编程日记 2023/11/5 9:24:54

【ArcGIS微课1000例】0077：ArcGIS生成经纬网（shp格式）

使用ArcGIS制图的时候，可以很方便的生成经纬网、方里网及参考格网，但是在需要shp格式的经纬网，进一步在南方cass中使用经纬网的时候，就需要单独生成了。如下图所示为全球大陆矢量数据，我们基于该数据来生成全球指定间距的经纬网数据。在ArcGIS中，生成经纬网和方里网均…...

编程日记 2023/11/5 9:23:53

读程序员的制胜技笔记04_有用的反模式（下）

1. 重新发明轮子 1.1. 发明家的特质就是要用质疑的心态对待所有事物，你从未停下质疑，那你将不可避免地成为一个发明家 1.2. 并非所有的事情都有现成的轮子可以拿来用 1.3. 自己重新写一个新的API，最终调用你使用的库 1.3.1. 你的API应该是…...

编程日记 2023/11/5 9:22:53

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…...

编程日记 2023/11/5 9:21:52

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…...

编程日记 2023/11/5 9:20:51

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配目录一、判断晶振与MCU是否兼容二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...

编程新知 2026/2/7 10:55:43

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目，核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容，附学习方向和应试技巧： 一、施工组织与进度管理核心目标： 规…...

编程新知 2025/9/12 3:11:17

STM32标准库-ADC数模转换器

文章目录一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”：输入模块（GPIO、温度、V_REFINT）1.4.2 信号 “调度站”：多路开关1.4.3 信号 “加工厂”：ADC 转换器（规则组注入…...

编程新知 2026/2/1 22:00:58

效果图

源代码

相关文章：