Cocos Creator有一個(gè)繪制組件graphics，該組件提供了畫點(diǎn)、線、圓等接口。最開始是有一個(gè)動(dòng)態(tài)的在兩個(gè)點(diǎn)之間畫線的需求。以下是錯(cuò)誤思維：于是在代碼中動(dòng)態(tài)創(chuàng)建了一個(gè)節(jié)點(diǎn)，暫且叫做line的節(jié)點(diǎn)，給它添加了父節(jié)點(diǎn)后又addcomponent了一個(gè)graphics組件，然后按照creator官方提供的畫線方法實(shí)現(xiàn)了一下，運(yùn)行預(yù)覽的結(jié)果就是什么都沒有。懶的檢測(cè)啥的，加上有其他的事情要做，原因以后再整理。下面直接附上以實(shí)現(xiàn)的畫線方法。

畫直線：在編輯器上添加一個(gè)graphics節(jié)點(diǎn)

在代碼中獲取節(jié)點(diǎn)lineNode,畫線drawLine

drawLine(startPos:Vec3,tarPos:Vec3){

????????console.log("畫線>>>>");

????????let ctx = this.lineNode.getComponent(Graphics);

????????ctx.lineWidth = 20;

????????ctx.strokeColor = Color.GREEN;

????????ctx.moveTo(startPos.x, startPos.y);

????????ctx.lineTo(tarPos.x, tarPos.y);

????????ctx.stroke();

????????//如果想要清除歷史的線, 可以執(zhí)行clear方法

????????// ctx.clear();

}

下面也列一下測(cè)試時(shí)實(shí)現(xiàn)的畫點(diǎn)和畫曲線的方法：

畫點(diǎn)：

ctx.circle(100,100,20);

ctx.fillColor = Color.YELLOW;

ctx.fill();

在（100，100）處畫一個(gè)半徑20像素的黃點(diǎn)并填充，同樣的清除還是調(diào)用clear方法

畫曲線：

ctx.lineWidth = 20;

ctx.strokeColor = Color.GREEN;

ctx.moveTo(startPos.x, startPos.y);

let midpos1 = v2(x,y);//控制點(diǎn)

let midpos2 = v2(x1,y1);//控制點(diǎn)

ctx.bezierCurveTo(midpos1.x,midpos1.y,midpos2.x,midpos2.y,tarPos.x,tarPos.y);

ctx.stroke();

和畫直線的區(qū)別其實(shí)就是加了兩個(gè)控制點(diǎn)并調(diào)用貝塞爾曲線的畫線接口，然后繪制就行了，具體控制點(diǎn)怎么設(shè)置就看實(shí)際需求