前端 原生js實現粒子效果

效果截圖：

實現原始碼：

<

!doctype html>
"content-type" content=
"text/html;charset=utf-8"
/>
demo<
/title>
<
/head>
"overflow:hidden;background:#000"
>
"container"
>
<
/canvas>
var canvas = document.
getelementbyid
("container");
var ctx = container.
getcontext
("2d");
function
resize()
resize()
; window.onresize = resize;
//建立粒子
var dots =
for(
var i=
0;i<
300;i++))
;}//建立滑鼠點
var mouse =
; window.
onmousemove
=function
(e) window.
onmouseout
=function()
function
animate()
dislv =
(d2.max - dis)
/d2.max;
ctx.
beginpath()
; ctx.linewidth=dislv;
ctx.strokestyle =
"rgba(255,255,255,"
+(dislv-
0.3)
+")"
; ctx.
moveto
(dot.x,dot.y)
; ctx.
lineto
(d2.x,d2.y)
; ctx.
stroke()
;}} ndots.
splice
(ndots.
indexof
(dot),1
);})
}setinterval
(animate,
1000/60
);<
/script>
<
/body>
<
/html>

原生JS實現彈幕效果

純屬無聊寫的，可能有很多問題，歡迎批評指教。效果圖 圖一是預設的一些彈幕，圖二是自己發射的彈幕，效果是一樣的。demo位址 首先是彈幕的位置，是要從最右滑到最左，為了防止隨機高度彈幕會覆蓋的問題，設定了通道。每乙個通道是從左到右的一條，高度固定，這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...

原生js實現簡單動畫效果

實現動畫效果可以用jquery提供的animate方法，或一些外掛程式來實現，但是隨著前端元件化開發的流行，jquery大量的dom操作已經顯得十分多餘，正在逐漸從前端技術棧中被淘汰，下面我們使用原生js實現簡單的勻速動畫效果和緩動效果 勻速動畫實現水平移動 css樣式 box line400 li...

CAEmitterLayer實現粒子效果

caemitterlayer實現粒子效果 caemitterlayer 在ios 5中，蘋果引入了乙個新的 calayer 子類叫做 caemitterlayer caemitterlayer 是乙個高效能的粒子引擎，被用來建立實時例子動畫如 煙霧，火，雨等等這些效果。caemitterlayer ...