很久沒更新博客了，因?yàn)榭吹絼e的游戲中有今天要說的效果，所以就去稍微看了一下Cocos Creator里的Graphics組件，并且也實(shí)現(xiàn)了這個(gè)挺好玩的效果，就是在鼠標(biāo)點(diǎn)擊的位置畫一個(gè)填充好的圓圈并且實(shí)現(xiàn)擴(kuò)散效果，這并不是唯一實(shí)現(xiàn)這個(gè)效果的解決辦法，用動(dòng)畫同樣也可以實(shí)現(xiàn)，然后廢話不多說了，直接開始。（因?yàn)椴粫?huì)弄gif圖就簡(jiǎn)單的截了個(gè)圖）如下圖所示是效果圖，

效果圖比較簡(jiǎn)陋，一會(huì)我會(huì)把代碼貼出來，代碼寫在一個(gè)腳本中并且在場(chǎng)景中創(chuàng)建一個(gè)空節(jié)點(diǎn)，這個(gè)空節(jié)點(diǎn)位置、寬高和Canvas一樣，掛上graphics組件即可，腳本也直接掛到這個(gè)空節(jié)點(diǎn)上運(yùn)行在瀏覽器中就可以看到實(shí)際效果了。

//鼠標(biāo)點(diǎn)擊出現(xiàn)畫線圓圈擴(kuò)散 cc.Class({extends: cc.Component,properties: {},onLoad () {if(cc.director.setClearColor){cc.director.setClearColor(cc.hexToColor('#d1f1ff'));}this.ctx=this.node.getComponent(cc.Graphics);this.ripples=[];this.mouse={x:0,y:0};this.onClick();},onClick(){const self=this;self.node.on(cc.Node.EventType.TOUCH_START,function (event) {self.mouse=event.touch.getLocation();self.addRipples();},self);},start () {},update(){let ripples=this.ripples;for(let index=0;index<ripples.length;index++){var ripple=ripples[index];ripple.reactivity+=10;ripple.fade-=0.05;if(ripple.fade<=0.0){ripples.splice(index,1);}}this.render();},addRipples(){if(this.ripples.length==0){this.ripples.push({x:this.mouse.x,y:this.mouse.y,reactivity:0,fade:1.0})}},render(){let graphics=this.ctx;graphics.clear();let ripples=this.ripples;for(var index = 0; index < ripples.length; index++) {var ripple = ripples[index];let fillColor = cc.hexToColor('#AAA5A5');fillColor.a = ripple.fade * 255;graphics.fillColor = fillColor;graphics.circle(ripple.x, ripple.y, ripple.reactivity);graphics.fill();}},onDisable() {if (cc.director.setClearColor) {cc.director.setClearColor( cc.Color.BLACK );}}, });

代碼不做任何解釋，不懂的API請(qǐng)自行去官網(wǎng)上查閱，想了解更多的小伙伴也可以直接去Cocos Creator的范例集合中去看，我也是在那里研究整理出來的，想直接用的小伙伴直接代碼拷貝過去就可以用，我自己也測(cè)試過沒有問題。

總結(jié)

以上是生活随笔為你收集整理的使用Graphics在鼠标点击画圆圈扩散效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。