Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录使用方法自定义参数相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器…

js 基于可视区域创建展示区域对应的经纬度二维数组

本篇文章主要是分享下基于地图区域创建经纬度二维数组,需要的朋友可以过来参考下接上个文章, 基于地图区域,算出这个展示区域对应的点. 经纬度的变化关系: XY页面展示上, 从左到右维度是增加如: 106 -> 107 , 从上到下经度是减小如:30 ->29 创建的时候需要确定从哪开始, 附上代码,如下: function getSizePointsData (latMin,latMax,lngMin,lngMax,lngStep,latStep){ // 区域的最小经度,最大经度…

原生js 基于canvas写一个简单的前端截图工具

先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .clip-img-w{ position: relative; width: 100%; height: 100%; font-si…

JS 将canvas画布保存到本地

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> window.onload = function() { draw(); var dlButton = document. getElementById ("baocun"); bindB…

canvas画布实现手写签名效果

最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码:  <div class="mSign_signMark_box"> <div class="mSign_signMark_write_box"> <div id="mSign_signMark_signature_pad" class="mSign_signMark_body…

弄个知乎的粒子动态背景_实践particles.js

好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图上图: 感觉有比格,就照着弄了一个,玩玩. github: https://github.com/VincentGarreau/particles.js/ 操作过程: 网上有基本流程,可以参考一下,不过直接用在登录页面会有小bug,需要调整下. 1.首先在页面中引入particles.js文件. <script src="js/particle…

particles.js在vue上的运用

转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架的,两个凑在一起学了.讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目酷酷的登录页嘻嘻~ 安装particles.js npm install --save particles.js 配置particles.js template这个就是动态粒子要展示的位置. <div id=&qu…

基于canvas与原生JS的H5动画引擎

前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现这种方式比较简单易学,但是能实现的效果也相对简单.一般都是对H5元素的平移,旋转,缩放等.适用于网页中的一些简单动画,对于由许多元素相互联系的复杂动画实现起来有些难度.当然也有基于css实现的比较复杂的动画(如:人物的行走),但是难度比较大.css动画教程:http://www.cnblogs.com/tengpan-…

将canvas画布内容转化为图片（toDataURL()，创建url）

将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL()来操作学习要点 canvas画布内容导出为图像 toDataURL()这个方法能把画布里的图案转变成base64编码格式的png,然后返回 Data URL数据. 温馨提示:以前多数浏览器不支持canvas中的内容直接右键保存为图片格式.但现在大多数浏览器都是支持的. 样例 <!DOCTYPE…

怎样创建一个canvas画布环境

1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <c…

js实现粒子特效，particles.js的使用

今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particles.js 2.下载下来是一个压缩包,解压后有很多文件,最少需要app.js,particles.js,stats.js这三个文件才可以实现最基本功能 3.在把其中的index.html嵌入到自己的web项目中,并且替换其中的目录就可以了. 其中最重要的一点是,index.html中的<script>…

使用particles.js实现网页背景粒子特效

得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo是需要自己在自己的云主机上搭建的,而Pipe可以选择自己搭建,也可以使用B3log搭建好的服务. 在Pipe的主页,背景使用了一个非常酷炫的粒子特效,而且还能和鼠标指针互动. 我最近正好在学习网页制作,就想着如果能把这个背景放到我自己的网页上就好了.一般这种效果不会是网页开发者自己写的,而是去调用一…

particles.js 一个非常酷炫的粒子动画库

GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:…

js将文字填充与canvas画布再转为图片

需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服务卡片,只有将服务名称作为图片才能实现动画效果: 最基础动画:-> 实现:将服务名称置于canvas画布中,再将画布转为图片代码实现: 1.获取dom /** * 获取service卡片中img对象并赋值src * @param serviceName 服务名称 */ setImageSrc(se…

canvas实现的粒子效果

前言:我的这个share很简单,没什么技术水准,主要是我自己觉得canvas这个标签很cool!,简单实用又能装X,而且又能实现很多看起来很炫的东西. 一关于canvas <canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素. <canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于Gecko 1.8的浏览器,比如 Firefox 1…

particles.js中文开发手册

2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个官方github:https://github.com/VincentGarreau/particles.js/ demo制作器,注意可能需要FQ https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出 http://vincentgarreau.com/particles.js/这个可以用来尝试…

particles.js使用及配置

particles.js使用及配置参考:http://blog.csdn.net/csdn_yudong/article/details/53128570 这个项目中有提供demo,可以直接下载这个项目,打开demo里面的index.html文件,即可看到效果. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title…

captcha.js一个生成验证码的插件，使用js和canvas生成

一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1.验证码插件-使用,2.验证码插件栗子,3.API介绍,4.支持浏览器注意:基于本项目源码从事科研.论文.系统开发,"最好"在文中或系统中表明来自于本项目的内容和创意,否则所有贡献者可能会鄙视你和你的项目. 使用本项目源码请尊重程序员职业和劳动插件源码地址:https://github…

web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用

1.2.11 拖放 1.2.11.1 html拖放 1.2.11.2 html拖放本次资源 showOjb(一个对象)展示一下一个对象的信息. 1.2.12 html画布(canvas) 标签的使用 1.2.12.1 HTML5画布标签-创建画布创建画布一般只使用js创建,不适用html直接创建. <script> CANVAS_WIDTH = 200; CANVAS_HEIGHT = 200; window.onload = function(){ createCanvas()…

关于使用Css设置Canvas画布大小的问题

问题分析我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述如果使用Css设置Canvas画布的大小,则导致画布按比例缩放到你设置的值. 原因在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过Css设置画布尺寸会引起奇怪的效果. 解决方案在Html页面上加入canvas元素(不能使用js动态加入canvas). 通过Html设置画布大小.可以直接在Html…

基于canvas的二维码邀请函生成插件

去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenny,你看现在市面上流行各种装逼H5,随便输入点名字啥的就给我生成房产证了,这种还可以分享出去,传播率可高了,或者你再看这里,一键生成邀请函,牛逼吧,要不你也帮我做一个这个功能,我去玩点传播手段. 我看见效果后第一反映就是,肯定canvas进行的图片拼接,现在市面上流行的效果具体是如何实现的我没有去看…

Canvas 画布组件（官网翻译）

Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.Canvas是一个应该包含所有UI元素的区域.画布是一个带有画布组件的游戏物体,并且所有的UI元素都应该是这个画布的子物体. Cre…

原生js实现canvas气泡冒泡效果

说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入JumpBubble.js一个js文件即可项目源码地址: https://github.com/wanghairong-i/JumpBubble== 使用demo: ES6版本的使用demo: const bubble = new JumpBubble(document.getElementById…

html5——canvas画布

一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,height.只能在html标签中指定,或是用js对canvas对象设置. <canvas id="wfPicture" width=300px; height=300px;> </canvas> 2,canvas的Path描画 <!DOCTYPE html>…

selenium webdriver 实现Canvas画布自动化测试

https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下乳所示,网页上有一张类似于下图的eChart报表图片.selenium的基本定位方式只能定位到该画布上,画布上的子元素通过selenium的基础定位方式是定位不到的, 此时就需要使用selenium的js注入的方式,通过插入js脚本的方式获取索要操作的元素坐标. 再使用action对应的方法去执行对…

微信小程序-基于canvas画画涂鸦

代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户自定画笔大小实现用户自定色彩实现用户动画撤回之前的操作实现生成分享海报实现用户预览画作,清除画布 2.案例目录结构二.程序实现具体步骤 1.index.wxml代码 <view cl…

基于canvas的仪表盘效果

概述基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细代码下载:http://www.demodashi.com/demo/13031.html 一.演示效果仪表盘效果如下: 二.项目结构截图 gauge.js文件是canvas仪表盘的主逻辑,demo.html中是使用的方法. 注:本例子只有2个文件,如上图所示. 三.使用方法在html中,加入一个ca…

前端JS利用canvas的drawImage()对图片进行压缩

对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇…

小程序开发-Canvas画布组件

Canvas画布基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> // canvas-id:必须填写在对应js中执行绘画具体逻辑 // canvas.js Page({ onReady() { const query = wx.createSelectorQuery() query.select('#canvasDemo') .fields({ node: true, s…

一个基于canvas的移动端图片编辑器

欢迎使用 canvas_mobile_drag 项目地址:https://github.com/xiaosu95/canvas_mobile_drag 点击查看demo(在移动端上查看) 该插件是一款脱离jq的移动端图片编辑器.可以应用在移动端H5页面或者微信小程序中. 插件实现的功能为可页面内初始化载入图片.手动添加手机相册内的图片.或者添加服务器端的图片(服务器端需要开启允许图片跨域).拥有多种的编辑模式.支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等. 插件操作模式支持手势放…

【Particles.js基于Canvas画布创建粒子原子颗粒效果】的更多相关文章