CocosCreator-Graphics组件的使用

Graphics是Cocos Creator中的绘画组件，提供了画点、线、圆等接口。

可以在节点初始化时获得组件接口。

start () {
this.ctx = this.getComponent(cc.Graphics);
}

画点

// 在(200,200)处画个半径为6像素的黄点
self = this;
self.ctx.clear();
self.ctx.circle(200, 200, 6);
self.ctx.fillColor = cc.Color.YELLOW;
self.ctx.fill();

画直线

// 从(100,100)到(300,300)画一条宽为3像素的绿色直线
self.ctx.clear();
self.ctx.lineWidth = 3;
self.ctx.strokeColor = cc.Color.GREEN;
self.ctx.moveTo(100, 100);
self.ctx.lineTo(300, 300);
self.ctx.stroke();  

画贝塞尔曲线

// 根据P0(起点)、P1(控制点1)、P2(控制点2)、P3(终点)画一条宽为3像素的三阶贝塞尔曲线，红色。
self.ctx.clear();
self.ctx.lineWidth = 3;
self.ctx.strokeColor = cc.Color.RED;
self.ctx.moveTo(p0.x, p0.y);
self.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
self.ctx.stroke();