html5粒子
1. 目前有哪些比较成熟的 html5 游戏引擎
最近比较火的是LayaBox酿心打造的LayaAir引擎,性能卓越,建议使用前先自己实测一下
LayaAir特点
极致性能
LayaAir优先使用webgl渲染,如果webgl不可用,自动无缝转为canvas渲染,引擎设计过程中处处以性能为优先原则,LayaAir是为裸跑而设计的HTML5引擎。
轻量易用
LayaAir API设计上追求精简,简单易用,上手容易,引擎本身非常注意自身大小,是目前同等功能最小的HTML5引擎。
支持多语言开发
LayaAir同时支持ActionScript3、TypeScript、JavaScript三种语言开发HTML5
功能齐全
同时支持2D,3D,VR、时间轴动画,缓动、UI系统、粒子动画、骨骼动画、物理系统等
提供可视化辅助开发及工具流
LayaAirIDE提供代码开发工具及可视化编辑器,清晰的工作流,让美术,策划,程序紧密配合,提高开发效率
开源免费
引擎全部开源并托管到github,并且全部免费使用,包括商用
当前功能
Webgl渲染
Canvas渲染
矢量图
图集支持
加载管理器
HTML富文本
位图字体
遮罩
滤镜
时间轴动画
UI
粒子
骨骼
物理系统
可视化IDE
3D
VR
2. canvas 粒子动画怎么设置为背景
在渲染设置里面,将输出格式设置为视频格式就可以,注意将时间帧区域选好
3. 介绍一款php编程用的软件,需要打代码有粒子效果,就是很炫的意思,安装最好别太难,免安装最好
1、HTML5 Canvas粒子模拟效果
这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。
4. canvas文字粒子效果,粒子大小
index.js 第84行29列,参数 p.z 直接改成数字,1-5是细到粗
5. html5 canvas粒子密度怎么用
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*4+1, //radius
d: Math.random()*mp //density
})
}
设定每次屏幕上显示的最大粒子数mp,然后创建一个对象数组作为粒子系统,每个粒子都作为一个对象保存在这个数组中。每一个粒子都有x、y坐标,半径和密度等属性值。
6. html5轻量级炫酷js粒子动画库插件怎么使用
方法调用该粒子插件:
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle',
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,
7. 怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码,网址是 https://github.com/VincentGarreau/particles.js/
使用方法非常简单
第一步,在html中引入脚本文件 particles.min.js,这个文件在下载的压缩包里可以找到
<scriptsrc="particles.min.js"></script>
第二步,在html中放入一个div容器,设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>
第三步,设置窗口样式
<styletype="text/css">
#particles-js{
z-index:-1;
position:absolute;
top:0;
width:100%;
background:#aaa;
}</style>
第四步,脚本生成粒子效果,可以单独放在一个js文件里,也可以放在<script>标签里。无论如何,这段脚本要出现在div容器之后。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
}
},"color":{"value":"#ffffff"
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"polygon":{"nb_sides":5
},"image":{"src":"img/github.svg","width":100,"height":100
}
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
}
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
}
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
}
}
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"resize":true
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
}
},"bubble":{"distance":400,"size":40,"ration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"ration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});
8. HTML canvas 文字粒子化
首先你得把那几个字写成一个三维数组的形式,用0和1标记。然后遍历数组,在数组内容为1的时候用.arc画一个圆。其实就是半径等于1*r 。然后定位每个圆点的位置就好
9. +3 2 1的粒子符号
(1)1个氢离子(2)2个铁离子(3)3个硫酸根离子 (4)5Mg2+ (5)20H- (6)3N03-