很久沒更新博客了，因為看到別的游戲中有今天要說的效果，所以就去稍微看了一下Cocos Creator里的Graphics組件，并且也實現了這個挺好玩的效果，就是在鼠標點擊的位置畫一個填充好的圓圈并且實現擴散效果，這并不是唯一實現這個效果的解決辦法，用動畫同樣也可以實現，然后廢話不多說了，直接開始。（因為不會弄gif圖就簡單的截了個圖）如下圖所示是效果圖，

效果圖比較簡陋，一會我會把代碼貼出來，代碼寫在一個腳本中并且在場景中創建一個空節點，這個空節點位置、寬高和Canvas一樣，掛上graphics組件即可，腳本也直接掛到這個空節點上運行在瀏覽器中就可以看到實際效果了。

//鼠標點擊出現畫線圓圈擴散 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請自行去官網上查閱，想了解更多的小伙伴也可以直接去Cocos Creator的范例集合中去看，我也是在那里研究整理出來的，想直接用的小伙伴直接代碼拷貝過去就可以用，我自己也測試過沒有問題。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。