canvas 流動邊框

效果圖

classDraw{

constructor(x,y,ctx,w,h){

this.x=x;

this.y=y;

this.w=w;

this.h=h;

this.ctx=ctx;

}

drawLine(){

this.ctx.strokeStyle="#00FFFF";

this.ctx.strokeRect(this.x,this.y,this.w,this.h);

this.ctx.fill();

}

drawPoint(x,y,r,opacity,hasShadow=false){

this.ctx.fillStyle=`rgba(0, 255, 255,${opacity})`;

// if(hasShadow){

//? ? this.ctx.fillStyle = `rgba(255, 255, 255,1)`;

//? ? this.ctx.shadowOffsetX = 0;

//? ? this.ctx.shadowOffsetY = 0;

//? ? this.ctx.shadowBlur = 5;

//? ? this.ctx.shadowColor = '#00FFFF';

// }else{

//? ? this.ctx.shadowBlur = opacity * 3;

// }

this.ctx.shadowBlur=opacity*3;

this.ctx.beginPath();

if(!x){

x=0;

}

if(!y){

y=0;

}

if(!opacity&&opacity!=0){

opacity=1;

}

this.ctx.arc(x,y,r,0,2*Math.PI);

this.ctx.closePath();

this.ctx.fill();

}

}

classPointextendsDraw{

constructor(x,y,ctx,w,h,canvasWidth,canvasHeight){

super(x,y,ctx,w,h);

this.canvasWidth=canvasWidth;

this.canvasHeight=canvasHeight;

this.moveNum=0;

}

init(){

// 清空畫布

this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);

newDraw(this.x,this.y,this.ctx,this.w,this.h).drawLine();

this.drawContent();

}

draw(_elePointLeft,r,opacity=0.8,hasShadow=false){

letx=0,y=0;

letelePointLeft=_elePointLeft;

if(_elePointLeft>=(this.w*2+this.h*2)){

elePointLeft=_elePointLeft%(this.w*2+this.h*2);

}

if(elePointLeft<this.w){

x=elePointLeft+this.x;

y=this.y;

}

if(elePointLeft>this.w&&elePointLeft<(this.w+this.h)){

x=this.w+this.x;

y=elePointLeft-this.w+this.y;

}

if(elePointLeft>(this.w+this.h)&&elePointLeft<(this.w*2+this.h)){

x=(this.w+this.x)-(elePointLeft-(this.w+this.h));

y=this.y+this.h;

}

if(elePointLeft>(this.w*2+this.h)&&elePointLeft<(this.w*2+this.h*2)){

x=this.x;

y=(this.w*2+this.h*2)-elePointLeft+this.y;

}

newDraw(this.x,this.y,this.ctx,this.w,this.h).drawPoint(x,y,r,opacity,hasShadow);

}

drawContent(){

for(leti=0;i<6;i++){

leteleInterval=(this.w*2+this.h*2)/6;

letmainR=3;

letelePointLeft=this.moveNum+this.x+eleInterval*i+mainR+100;

this.draw(elePointLeft,mainR,0.8,true)

this.drawChild(elePointLeft,mainR)

}

}

drawChild(eleChidrenLeftPoint,mainPointR){

// 每個元素長度為10個半圓

letr=mainPointR;

// let left = mainPointR - (mainPointR + mainPointR / 4)

letleft=mainPointR-(mainPointR)

// let left = mainPointR

letopacity=1

for(leti=0;i<50;i++){

r=r-mainPointR/50;

if(r<1){

r=1

}

left=left+r

opacity=opacity-mainPointR/100;

letelePointLeft=eleChidrenLeftPoint-left;

this.draw(elePointLeft,r,opacity);

}

}

move(){

this.moveNum+=4;

this.init();

}

}

letobj={};

/**

*

* @param {*} x 相對容器的x軸坐標(biāo)

* @param {*} w? 相對容器的y軸坐標(biāo)

* @param {*} width? 容器寬度

* @param {*} height? 容器高度

*/

functioninit(width,height,x=10,w=10){

letmeteorCanvas=document.getElementById('meteor');

letmeteorCtx=meteorCanvas.getContext('2d');

letcanvasWidth=meteorCanvas.clientWidth*1;

letcanvasHeight=meteorCanvas.clientHeight*1;

meteorCanvas.width=canvasWidth;

meteorCanvas.height=canvasHeight;

obj=newPoint(x,w,meteorCtx,width,height,canvasWidth,canvasHeight);

obj.init();

animate();

}

functionanimate(){

obj.move()

requestAnimationFrame(animate);

}

// export default init;

gitee倉庫地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聋溜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌较屿,老刑警劉巖哨坪,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苫亦,死亡現(xiàn)場離奇詭異俗冻,居然都是意外死亡魄健,警方通過查閱死者的電腦和手機虚婿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門旋奢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人然痊,你說我怎么就攤上這事至朗。” “怎么了剧浸?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵锹引,是天一觀的道長。 經(jīng)常有香客問我唆香,道長嫌变,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任躬它,我火速辦了婚禮腾啥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冯吓。我一直安慰自己倘待,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布组贺。 她就那樣靜靜地躺著凸舵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪失尖。 梳的紋絲不亂的頭發(fā)上啊奄,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天渐苏,我揣著相機與錄音,去河邊找鬼增热。 笑死整以,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的峻仇。 我是一名探鬼主播公黑,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摄咆!你這毒婦竟也來了凡蚜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤吭从,失蹤者是張志新(化名)和其女友劉穎朝蜘,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涩金,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡谱醇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了步做。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片副渴。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖全度,靈堂內(nèi)的尸體忽然破棺而出煮剧,到底是詐尸還是另有隱情,我是刑警寧澤将鸵,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布勉盅,位于F島的核電站,受9級特大地震影響顶掉,放射性物質(zhì)發(fā)生泄漏草娜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一一喘、第九天 我趴在偏房一處隱蔽的房頂上張望驱还。 院中可真熱鬧,春花似錦凸克、人聲如沸议蟆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咐容。三九已至,卻和暖如春蚂维,著一層夾襖步出監(jiān)牢的瞬間戳粒,已是汗流浹背路狮。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蔚约,地道東北人奄妨。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像苹祟,于是被迫代替她去往敵國和親砸抛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容