html5 烟雾,jQuery烟雾背景发生器(HTML5 Canvas插件waterpipe.js

0b9473093c51c7bf1b6aa5c2795310e7.png

c714816320c3c7678952c0af200e40b9.png

插件描述:waterpipe.js是一个创建烟雾弥漫的背景,有多种效果可选择,自定义参数效果还是挺酷的哦!

使用方法

1、包括jQuery和waterpipe.js

2、创建画布元素内包装

Your browser does not support HTML5 canvas.

3、创建画布元素内包装var smokyBG = $('#wavybg-wrapper').waterpipe({

//Default values

gradientStart: '#000000',

gradientEnd: '#222222',

smokeOpacity: 0.1,

numCircles: 1,

maxMaxRad: 'auto',

minMaxRad: 'auto',

minRadFactor: 0,

iterations: 8,

drawsPerFrame: 10,

lineWidth: 2,

speed: 1,

bgColorInner: "#ffffff",

bgColorOuter: "#666666"

});

选项

选择类型        默认值

gradientStartstring'#000000'开始颜色的十六进制格式。

gradientEndstring'#222222'渐变结束色十六进制格式。

smokeOpacitynumber0.10.1号烟度0至1。.

numCirclesint1Number of circles (smokes).

maxMaxRadint or 'auto''auto'可以用来改变圆半径的大小

minMaxRadint or 'auto''auto'可以用来改变圆半径的大小

minRadFactorint0表示相对于最大可能的最小半径大小。从0到1的整数。

iterationsint8The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas.

drawsPerFrameint10Number of curves to draw on every tick of the timer

lineWidthnumber2Line width

speedint1Drawing speed (tick of timer in ms)

bgColorInnerstring'#ffffff'背景外观颜色的十六进制格式

bgColorOuterstring'#666666'背景内颜色的十六进制格式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/513762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据仓库分层存储技术揭秘

简介: 本文介绍数据仓库产品作为企业中数据存储和管理的基础设施,在通过分层存储技术来降低企业存储成本时的关键问题和核心技术。 作者 | 沄浩、士远 来源 | 阿里技术公众号 一 背景 据IDC发布的《数据时代2025》报告显示,全球每年产生的数…

cups支持的打印机列表_网络存储让你的打印机瞬间变无线,打印文件不用愁

无论是公司的文件、合同还是学校的教材作业总有需要打印的而且还需要满足手机、电脑等设备的无线打印不然文件来回拷贝实在是太麻烦了只要打印机搭配群晖NAS旧打印机也能上岗再就业轻松实现无线打印!话不多说,这就开始教大家如何使用!先确认一…

计算机辅助制造在汽车行业的应用,机械设计制造及其自动化在我国汽车行业的应用毕业论文(设计)..doc...

机械设计制造及其自动化在我国汽车行业的应用毕业论文(设计)..docGuangDong Polytechnic Normal University毕业论文(设计)题目:机械设计制造及其自动化在我国汽车行业的应用院 另IJ:计算机科学学院級:计算机应用06业本姓 名:张三学 号:2004木…

python同时输出多个值_怎样在python中输出多个数组元素?

展开全部 如果2113要输出多个列表元素,实际上是列表的分片5261或者说是切片。 以下代码运4102行通过:12list [a, b, mpilgrim, z, example]print(\n, list[0:3]) 运行效1653果:1.python输出一维矩阵或numpy数组中的非0元素 import numpy as …

网游云上网络优化方案

简介: 网游云上网络优化方案1. 游戏行业背景 1.1 行业概况 2019全球数字游戏营收1094亿美元,其中中国市场328亿美元。国内游戏⽤户数6.5亿;移动端 (60%)>PC端>主机。移动游戏占⽐逐年增⻓已成为绝对的主流。国内公司近3万,近…

云栖大会展出两款一体机,搭载新一代无影融合架构

10月18日云栖大会开放日上,阿里云基于新一代无影架构的两款一体机已对观众展出。两款新品分为23.8寸标准版和27寸Pro版,Pro版为手绘场景配有触控屏和触控笔,官方介绍为首款设计师云电脑。 在云栖大会展区,观众已经可以对一体机进…

ansys如何删除线_绘画新手不懂如何用ps提取线稿?教你用PS提取自己喜欢的线稿!...

绘画新手不懂如何用ps提取线稿?初学者如何自学绘画?自学板画难吗?怎样才能学习好绘画?想必这些都是绘画初学者们经常在想的问题吧,就是不知道如何才能学习好绘画,然后绘画出自己想要画的东西那么今天灵猫课…

Service Mesh 从“趋势”走向“无聊”

简介: 过去一年,阿里巴巴在 Service Mesh 的探索道路上依旧扎实前行,这种坚定并非只因坚信 Service Mesh 未来一定是云计算基础技术的关键组成部分,还因需要借这一技术趋势去偿还过去所积累下来的技术债(“技术债”并非…

计算机后台 鼠标灯不亮,开机一直黑屏键盘鼠标灯不亮

大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答。开机一直黑屏键盘鼠标灯不亮的原因:1、显示器与电脑的连接线或者连接电脑的电源线没有安装紧密,插紧即可。2、接触不良会造成电脑开机黑屏,取下电…

python增加一列数据_python数据怎么添加列?

python在DataFrame数据中添加列的方法: 1、使用concat方法在数据中添加列 concat方法相当于数据库中的全连接(union all),它不仅可以指定连接的方式(outer join或inner join)还可以指定按照某个轴进行连接。…

开源 1 年半 star 破 1.2 万的 Dapr 是如何在阿里落地的?

简介: Dapr 是 2019 年 10 月微软开源的可移植、事件驱动分布式运行时,它使开发人员能够轻松地构建运行在云平台和边缘的弹性而微服务化的无状态和有状态的应用程序,从而降低基于微服务架构构建现代云原生应用的准入门槛。 作者 | 敖小剑 来源…

hashmap value占用空间大小_java-测量和监视大型HashMap的大小

首先,有一篇来自Alexey Shipilev(Oracle的前JVM工程师,现在在Redhat的)的this篇很棒的文章,解释说这并不是那么容易.Java中的每个对象都有两个标头,它们的大小可以取决于平台或jvm的启动配置(UseCompressedOops).然后,在字段和对象自身之间进行填充和对齐(8字节对齐).然后,有一…

cron 每年执行一次_crontab服务执行定时脚本,在指定时间内让php执行处理业务逻辑...

技小白 2019-12-19 11:45:33crontab-e编辑某个用户的cron服务设置执行脚本crontab-l列出某个用户cron服务列表信息crontab-r删除某个用户的cron服务定时任务crontab格式分小时日月星期命令******0-590-231-311-120-6command注:“*”代表取值范围内的数字“/”代表每…

Fluid 给数据弹性一双隐形的翅膀 -- 自定义弹性伸缩

简介: 弹性伸缩作为 Kubernetes 的核心能力之一,但它一直是围绕这无状态的应用负载展开。而 Fluid 提供了分布式缓存的弹性伸缩能力,可以灵活扩充和收缩数据缓存。 它基于 Runtime 提供了缓存空间、现有缓存比例等性能指标, 结合自身对于 Run…

ff14注册完服务器可以转,FF14怎么转服 FF14转服条件一览-游侠网

你知道FF14怎么转服吗?如果想要换服务器,都有哪些特别的要求呢?下面为大家带来的是FF14转服条件一览,大家一起来了解一下吧。转服条件一览跨区角色转移试行规则1、本次仅开放陆行鸟区转向莫古力区指定服务器功能。我们将在莫古力区…

阿里平头哥发布自研云芯片倚天710,性能超越业界标杆20%

10月19日,2021云栖大会现场,阿里巴巴旗下半导体公司平头哥发布自研云芯片倚天710。该芯片是业界性能最强的ARM服务器芯片,性能超过业界标杆20%,能效比提升50%以上。倚天710是阿里云推进「一云多芯」策略的重要一步,也是…

业务团队如何统一架构设计风格?

简介: 首次上线应用,面对业务框架搭建你是否曾感到无从下手?维护线上应用,面对大量历史包袱你是否正避坑不及深陷泥潭?为何同样是业务应用,不同人的设计风格千差万别?为何最初的设计经过多个迭代…

javacurrentmap_Java ConcurrentHashMap.forEach方法代码示例

import java.util.concurrent.ConcurrentHashMap; //导入方法依赖的package包/类public static void main(String[] args) {ConcurrentHashMap> userHash new ConcurrentHashMap<>();HashFiller hashFiller new HashFiller(userHash);Thread[] threads new Thread[…

python接口测试实战_Python接口测试实战01:七种武器

工欲善其事必先利其器&#xff0c;在正式开始介绍使用Python做接口测试前&#xff0c;我们先准备好相应的工具&#xff0c;这样就能快速上手接口测试了。 0. Python 在测试领域Python其实大有可为&#xff0c;不管是Web、移动端、接口、嵌入式测试都能看到Python的身影。而且因…

一文详解物化视图改写

简介&#xff1a; 本文主要介绍什么是物化视图&#xff0c;以及如何实现基于物化视图的查询改写。 作者&#xff1a;阿里云数据库OLAP产品部 云曦 预计算和缓存是计算机领域提高性能以及降低成本的最常见的手段之一。对于那些经常重复的请求&#xff0c;如果可以通过缓存回答…