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-