摘要:個人博客封裝方法,增加點擊,移動效果,配置顏色線條粗細(xì)功能在線查看傳到了,以后也許用得著,地址先上效果點擊效果默認(rèn)生成隨機(jī)大小的個小點點鼠標(biāo)移動,修改鼠標(biāo)小點點的軸坐標(biāo)鼠標(biāo)點擊,增加隨機(jī)大小小點點增加離屏優(yōu)化性能修復(fù)鼠標(biāo)移出,去除鼠標(biāo)效果的
個人博客 http://taoquns.com/paper/59ba...
canvas 封裝方法,增加點擊,移動效果,配置顏色線條粗細(xì)功能
在線查看 http://jsrun.net/3PkKp/edit
傳到github了,以后也許用得著,地址: https://github.com/Taoqun/can...
先上效果:
點擊效果:
默認(rèn)生成隨機(jī)大小的100個小點點
鼠標(biāo)移動,修改鼠標(biāo)小點點的xy軸坐標(biāo)
鼠標(biāo)點擊,增加隨機(jī)大小小點點
增加離屏canvas 優(yōu)化性能
修復(fù)鼠標(biāo)移出,去除鼠標(biāo)效果的小點點
增加暫停開始功能
index.html
index.js
var root = document.querySelector("#root") var a = new CanvasAnimate(root,{length:80,clicked:true,moveon:true}) a.Run() // 開始運行 a.pause() // 暫停
CanvasAnimate.js
說明,配置參數(shù)
length Number 生成的小點點數(shù)量
RoundColor String 小點點顏色
LineColor String 線條顏色
LineWeight Number 線條寬度
clicked Boolean 鼠標(biāo)點擊是否增加連接小點點
moveon Boolean 鼠標(biāo)移動是否增加連接效果
方法
Run 開始運行
pause 暫停動畫 或者 開始動畫 切換
function CanvasAnimate(Dom,options){ options = options || {} this.Element = Dom this.cvs = Dom.getContext("2d") this.off_cvs = document.createElement("canvas") this.off_cvs.width = Dom.width this.off_cvs.height = Dom.height this.Dom = this.off_cvs.getContext("2d") this.width = Dom.width this.height = Dom.height this.length = options.length || 100 this.RoundColor = options.RoundColor || "#999" this.RoundDiameter = options.RoundDiameter || 2 this.LineColor = options.LineColor || "#ccc" this.LineWeight = options.LineWeight || 1 this.clicked = options.clicked || false this.moveon = options.moveon || false this.list = [] this.paused = true } CanvasAnimate.prototype.Run = function(){ if( this.clicked ){ this.Element.addEventListener( "click",this.Clicked.bind(this) ) } if( this.moveon ){ this.Element.addEventListener( "mousemove",this.moveXY.bind(this) ) this.Element.addEventListener( "mouseout",this.moveoutXY.bind(this) ) } this.Draw( this.getLength() ) } CanvasAnimate.prototype.getLength=function(){ let arr = [] for(let i=0;i< this.length ;i++){ let obj = {} obj.x = parseInt( Math.random() * this.width ) obj.y = parseInt( Math.random() * this.height ) obj.r = parseInt( Math.random()*10 ) obj.controlX = parseInt( Math.random()*10 ) > 5 ? "left":"right" obj.controlY = parseInt( Math.random()*10 ) > 5 ? "bottom":"top" arr.push(obj) } return arr } CanvasAnimate.prototype.Draw = function(list){ let new_arr = [] let line_arr = [] list.map((item,index)=>{ let xy = this.ControlXY(item) let obj = this.ControlRound(xy) new_arr.push( obj ) }); new_arr.map((item1,index1)=>{ new_arr.map((item2,index2)=>{ if(item1 !== item2){ let x = item1.x - item2.x let y = item1.y - item2.y if( Math.abs(x)< 100 && Math.abs(y)<100 ){ let obj = { x1:item1.x, y1:item1.y, x2:item2.x, y2:item2.y, } line_arr.push(obj) } } }) }) this.drawLine(line_arr) new_arr.map((item)=>{ this.drawRound(item) }) this.list = new_arr this.cvs.drawImage(this.off_cvs,0,0,this.width,this.height) setTimeout(()=>{ if(this.paused){ this.next() } },50) } CanvasAnimate.prototype.next = function(){ this.cvs.clearRect( 0,0,this.width,this.height ) this.Dom.clearRect( 0,0,this.width,this.height ) this.Draw( this.list ) } CanvasAnimate.prototype.drawRound = function(obj){ let {x,y,r} = obj this.Dom.beginPath() this.Dom.arc( x,y,r, 0, 2*Math.PI ) this.Dom.fillStyle = this.RoundColor this.Dom.fill() this.Dom.closePath() } CanvasAnimate.prototype.drawLine = function(list){ list.map( (item)=>{ this.Dom.beginPath() this.Dom.moveTo( item.x1,item.y1 ) this.Dom.lineTo( item.x2,item.y2 ) this.Dom.lineWidth = this.LineWeight this.Dom.strokeStyle = this.LineColor this.Dom.stroke() this.Dom.closePath() }) } CanvasAnimate.prototype.ControlXY = function(obj){ if(obj.x >= (this.width - obj.r) ){ obj.controlX = "left" }else if( obj.x <= parseInt(obj.r/2) ){ obj.controlX = "right" } if( obj.y >= (this.height - obj.r) ){ obj.controlY = "bottom" }else if( obj.y <= parseInt(obj.r/2) ){ obj.controlY = "top" } return obj } CanvasAnimate.prototype.ControlRound = function(obj){ switch(obj.controlX){ case "right": obj.x++; break; case "left": obj.x--; break; } switch(obj.controlY){ case "top": obj.y++; break; case "bottom": obj.y--; break; } return obj } CanvasAnimate.prototype.Clicked = function(event){ let obj = {} obj.x = event.clientX obj.y = event.clientY obj.r = parseInt( Math.random()*10 ) obj.controlX = parseInt( Math.random()*10 ) > 5 ? "left" :"right" obj.controlY = parseInt( Math.random()*10 ) > 5 ? "bottom" :"top" this.list.push(obj) } CanvasAnimate.prototype.moveXY = function(event){ let obj = {} obj.x = event.clientX obj.y = event.clientY obj.r = 0 obj.move = true if( this.list[0]["move"] ){ this.list[0]["x"] = obj.x this.list[0]["y"] = obj.y this.list[0]["r"] = 1 }else{ this.list.unshift(obj) } } CanvasAnimate.prototype.moveoutXY = function(event){ this.list.shift() } CanvasAnimate.prototype.pause = function(){ this.paused = !this.paused if( this.paused){ this.Draw(this.list) } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/82454.html
摘要:可以繪制動態(tài)效果,除了常用的規(guī)則動畫之外,還可以采用粒子的概念來實現(xiàn)較復(fù)雜的動效,本文分別采用普通動效與粒子特效實現(xiàn)了一個簡單的時鐘。普通時鐘普通動效即利用的,實現(xiàn)有規(guī)則的圖案動畫。表示保存當(dāng)前環(huán)境的狀態(tài),在此基礎(chǔ)上進(jìn)行繪制。 canvas用于在網(wǎng)頁上繪制圖像、動畫,可以將其理解為畫布,在這個畫布上構(gòu)建想要的效果。 canvas可以繪制動態(tài)效果,除了常用的規(guī)則動畫之外,還可以采用粒子的...
摘要:前言之前有發(fā)過這個項目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個博客項目。 前言 之前有發(fā)過這個項目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個博客項目。文末附前端實習(xí)求職簡歷 項目簡介 簡要介紹:一個前后端分離的項目主要技術(shù)棧:vue全家桶 + node.js + Express + Mongodbgithub...
摘要:前言之前有發(fā)過這個項目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個博客項目。 前言 之前有發(fā)過這個項目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個博客項目。文末附前端實習(xí)求職簡歷 項目簡介 簡要介紹:一個前后端分離的項目主要技術(shù)棧:vue全家桶 + node.js + Express + Mongodbgithub...
摘要:點都構(gòu)建完畢了,就要構(gòu)建點與點之間的連線了,我們用到雙重遍歷,把兩個點捆綁成一組,放到數(shù)組中。最后加入鼠標(biāo)移動事件,啟動定時器大功告成 廢話不說先上圖:showImg(https://segmentfault.com/img/bVOH83?w=1312&h=586); 關(guān)于這個效果我第一次見是在https://www.mengxiaozhu.cn/后來知乎登錄頁也開始用了https:/...
摘要:點都構(gòu)建完畢了,就要構(gòu)建點與點之間的連線了,我們用到雙重遍歷,把兩個點捆綁成一組,放到數(shù)組中。最后加入鼠標(biāo)移動事件,啟動定時器大功告成 廢話不說先上圖:showImg(https://segmentfault.com/img/bVOH83?w=1312&h=586); 關(guān)于這個效果我第一次見是在https://www.mengxiaozhu.cn/后來知乎登錄頁也開始用了https:/...
閱讀 1830·2021-11-11 16:55
閱讀 750·2019-08-30 15:53
閱讀 3588·2019-08-30 15:45
閱讀 671·2019-08-30 14:10
閱讀 3263·2019-08-30 12:46
閱讀 2123·2019-08-29 13:15
閱讀 2026·2019-08-26 13:48
閱讀 934·2019-08-26 12:23