一、雨滴特效需求
雨滴從視窗頂部隨機下落到達底部將呈現波紋逐漸散開變淡直到消失，雨滴特效隨視窗變化自適應
二、雨滴實現思路
1. 用物件導向的思維 首先建立canvas畫布 ，繪製乙個雨滴的初始化形狀
2. 在給雨滴新增運動的方法
3. 通過定時器讓雨滴運動起來
三、具體分析
1.雨滴初始化需要的屬性有哪些？
座標x，y 寬高w，h 。
2.雨滴下落是逐漸加速下落不是勻速需要給乙個加速度的屬性，也就是y軸座標不斷加上加速度的值
3.雨滴下落到底部某乙個區域後開始呈現波紋逐漸散開，也就是到達底部某個範圍內開始畫圓，圓逐漸變大並且變淡加上透明度
4.雨滴下落拖尾效果需要繪製一層陰影覆蓋之前運動的雨滴
三、**
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
canvastitle
>
>
*canvas
style
>
head
>
>
"mycanvas"
>
canvas
>
>
// 建立畫布
let mycanvas = document.
getelementbyid
('mycanvas'
)let ctx = mycanvas.
getcontext
('2d'
)// 自適應視窗
let width = mycanvas.width = window.innerwidth
let height = mycanvas.height = window.innerheight
window.
addeventlistener
('resize',(
)=>
)// 繪製雨滴
let raindroparr =
function
raindrop
(x, y, w, h, l, r, dr, maxr, a, va)
raindrop.prototype =
)` ctx.
stroke()
}else
this
.update
(index)},
update:
function
(index)
}else
}else}}
function
rand
(min, max)
setinterval((
)=>
,100
)setinterval((
)=>},
30)script
>
body
>
html
>
canvas基本上任何運動，特效，都是通過js定時器改變座標的方式實現
canvas雨滴繪製總結（三）
5 繪製雨滴n個不能同時下落 問題一 canvas寬高設定出現白邊 問題二 canvas具有預設大小 300px150px 問題三 canvas自適應頁面大小如何實現 問題四 雨滴繪製原理 問題五 setintervalmoverain100060 問題六 乙個函式在沒有指定呼叫主體前它的this永...
canvas實現流星特效
控制透明度變化函式 function easeinquad curtime,begin,end,duration 用平方根構建的緩慢減速運動 核心函式 x x 2 x function easeoutquad curtime,begin,end,duration function easeinout...
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...