控制透明度變化函式
function
easeinquad
(curtime,begin,end,duration)
//用平方根構建的緩慢減速運動 核心函式:x*x + 2*x
function
easeoutquad
(curtime,begin,end,duration)
function
easeinoutquad
(curtime,begin,end,duration)
else
}
function
intervalopcity
(cur=
0,start=
0.3,end=
0.8,dur=3)
let opcity =
fadeopcity
(cur,start,end,dur)
let color =
`rgba(0,0,0,$)`
clearbgcolor
(wrap)
newparticle
(wrap,
[x,y]
,r,color)
cur=
parsefloat
(cur+
0.1)
settimeout((
)=>,33
)}
function
intervalmove
(speed,g=0)
g = g+speed
let nextposition =
moveposition
(a,g,startposition)
x = nextposition[0]
y = nextposition[1]
clearbgcolor
(wrap1)
for(
let i =
1;i<=
360;i++
)let g1position =
moveposition
(a,g1,startposition)
newparticle
(wrap1,
[g1position[0]
,g1position[1]
],r/(1
+i/5),
`rgba(255,200,200,0.5)`)}
settimeout((
)=>,33
)}
function
easeinquad
(curtime,begin,end,duration)
//用平方根構建的緩慢減速運動 核心函式:x*x + 2*x
function
easeoutquad
(curtime,begin,end,duration)
function
easeinoutquad
(curtime,begin,end,duration)
else
}function
newcanvas
(width,height)
function
setbgcolor
(wrap,color)
function
clearbgcolor
(wrap)
function
newparticle
(wrap,position,r,color)
function
fadeopcity
(cur,start,end,dur)
let wrap0 =
newcanvas
(1000
,800
)let wrap2 =
newcanvas
(1000
,800
)let wrap =
newcanvas
(1000
,800
)let wrap1 =
newcanvas
(1000
,800
)setbgcolor
(wrap0,
"black"
)setbgcolor
(wrap,
"rgba(0,0,0,0)"
)setbgcolor
(wrap1,
"rgba(0,0,0,0)"
)setbgcolor
(wrap2,
"rgba(0,0,0,0)"
)let startposition =
[500
,200
]let r =
10let a =
-200
let x = a*(1
-math.
cos(0)
)*math.
sin(0)
+startposition[0]
let y = a*(1
-math.
cos(0)
)*math.
cos(0)
+startposition[1]
function
moveposition
(a,g,startposition)
function
intervalmove
(speed,g=0)
g = g+speed
let nextposition =
moveposition
(a,g,startposition)
x = nextposition[0]
y = nextposition[1]
clearbgcolor
(wrap1)
for(
let i =
1;i<=
360;i++
)let g1position =
moveposition
(a,g1,startposition)
newparticle
(wrap1,
[g1position[0]
,g1position[1]
],r/(1
+i/5),
`rgba(255,200,200,0.5)`)}
settimeout((
)=>,33
)}function
intervalopcity
(cur=
0,start=
0.3,end=
0.8,dur=3)
let opcity =
fadeopcity
(cur,start,end,dur)
let color =
`rgba(0,0,0,$)`
clearbgcolor
(wrap)
newparticle
(wrap,
[x,y]
,r,color)
cur=
parsefloat
(cur+
0.1)
settimeout((
)=>,33
)}intervalopcity()
intervalmove(1
)
canvas 雨滴特效
一 雨滴特效需求 雨滴從視窗頂部隨機下落到達底部將呈現波紋逐漸散開變淡直到消失，雨滴特效隨視窗變化自適應 二 雨滴實現思路 1.用物件導向的思維 首先建立canvas畫布 繪製乙個雨滴的初始化形狀 2.在給雨滴新增運動的方法 3.通過定時器讓雨滴運動起來 三 具體分析 1.雨滴初始化需要的屬性有哪些...
關於canvas粒子特效實現分析
個人小站點 1.關於canvas教程可以看了解關於畫線和圓形的相關步驟就行 2.canvas粒子特效要實現的效果 當滑鼠移動時，在滑鼠周圍產生特定的粒子並連線，向四周移動，達到一定條件消失。參考了知乎登入首頁 canvas 粒子動態效果，可配置和乙個少女心滿滿的例子帶你入門 canvas 關於動畫是...
canvas特效之刮刮樂和粒子特效
刮刮樂 lang en charset utf 8 name viewport content width device width,initial scale 1.0 刮刮樂title document.title 被刮開的面積 f.tofixed 2 if f 200 script body h...