js canvas實(shí)現(xiàn)星空連線背景特效
更新時(shí)間:2019年11月01日 14:14:54 作者:風(fēng)無意
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)星空連線背景特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js canvas星空連線背景的具體代碼,供大家參考,具體內(nèi)容如下
<html> <head> <meta charset="UTF-8"> <title>canvas星空連線背景特效</title> <style type="text/css"> body{ margin: 0; } #canvas{ display: block; background: #000; margin: 0 auto; } </style> </head> <body> <canvas id="canvas"></canvas> <script> function Starry(){ this.cxt=canvas.getContext("2d"); canvas.width=window.innerWidth; canvas.height=window.innerHeight; this.cW=canvas.width; this.cH=canvas.height; this.num=200; this.data=[]; } Starry.prototype={ init: function(){ for (var i=0;i<this.num;i++) { this.data[i]={ x:Math.random()*this.cW, y:Math.random()*this.cH, cX:Math.random()*0.6-0.3, cY:Math.random()*0.6-0.3 }; this.drawCircle(this.data[i].x,this.data[i].y); } }, drawCircle: function(x,y){ var cxt=canvas.getContext("2d"); cxt.save();//保存路徑 cxt.fillStyle="pink"; cxt.beginPath();//開始路徑 cxt.arc(x,y,1,0,Math.PI*2,false); cxt.closePath();//結(jié)束路徑 cxt.fill();//填充方法 cxt.restore();//釋放路徑 }, drawLine: function(x1,y1,x2,y2){ var cxt=this.cxt; var color=cxt.createLinearGradient(x1,y1,x2,y2); color.addColorStop(0,"yellow"); color.addColorStop(1,"green"); cxt.save(); cxt.strokeStyle=color; cxt.beginPath();//開始路徑 cxt.moveTo(x1,y1); cxt.lineTo(x2,y2); cxt.closePath();//結(jié)束路徑 cxt.stroke();//填充方法 cxt.restore();//釋放路徑 }, moveCircle: function(){ var self=this; self.cxt.clearRect(0,0,self.cW,self.cH); for(var i=0;i<self.num;i++){ self.data[i].x+=self.data[i].cX; self.data[i].y+=self.data[i].cY; if(self.data[i].x>self.cW||self.data[i].x<0){ self.data[i].cX=-self.data[i].cX; } if(self.data[i].x>self.cH||self.data[i].y<0){ self.data[i].cY=-self.data[i].cY; } this.drawCircle(self.data[i].x,self.data[i].y); for(var j=i+1;j<self.num;j++){ if(Math.pow(self.data[i].x-self.data[j].x,2) +Math.pow(self.data[i].y-self.data[j].y,2) <=50*50){ self.drawLine(self.data[i].x,self.data[i].y, self.data[j].x,self.data[j].y); } } } } } var starry=new Starry(); starry.init(); setInterval(function(){starry.moveCircle();},1); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動畫特效
- 教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
- js canvas實(shí)現(xiàn)隨機(jī)粒子特效
- javascript結(jié)合html5 canvas實(shí)現(xiàn)(可調(diào)畫筆顏色/粗細(xì)/橡皮)的涂鴉板
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
- js+canvas實(shí)現(xiàn)滑動拼圖驗(yàn)證碼功能
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- JS+Canvas 實(shí)現(xiàn)下雨下雪效果
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- js和canvas繪制圓形金屬質(zhì)感特效
相關(guān)文章
JS數(shù)組方法shift()、unshift()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法shift()、unshift()用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)組shift()與unshift()方法功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04JavaScript實(shí)現(xiàn)身份證驗(yàn)證代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)身法證驗(yàn)證代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08Javascript動態(tài)綁定事件的簡單實(shí)現(xiàn)代碼
Javascript事件綁定的方法很多,很靈活。不過,作為比較簡單的動態(tài)綁定,下面的代碼看似正確,但得不到預(yù)期的效果。2010-12-12微信小程序van-field中的left-icon屬性自定義實(shí)現(xiàn)過程
在小程序中,我們是用 Vant 組件庫時(shí),常常會用到 van-field 輸入框控件,今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實(shí)現(xiàn),感興趣的朋友一起看看吧2023-08-08