【CocosCreator入门】CocosCreator组件 | Graphics（绘制）组件

Graphics组件是Cocos Creator中一个用于绘图的组件。它可以用来绘制基本图形，如线段、矩形、圆形、椭圆形、多边形等。

以下是一些使用Graphics组件的基本示例：

1. 绘制一条线段：

// 获取graphics组件
var graphics = node.addComponent(cc.Graphics);
 
// 设置线宽
graphics.lineWidth = 5;
 
// 设置颜色
graphics.strokeColor = cc.Color.RED;
 
// 绘制一条线段
graphics.moveTo(0, 0);
graphics.lineTo(100, 100);
graphics.stroke();

2. 绘制一个矩形：

// 获取graphics组件
var graphics = node.addComponent(cc.Graphics);
 
// 设置填充颜色
graphics.fillColor = cc.Color.GREEN;
 
// 设置线宽
graphics.lineWidth = 5;
 
// 绘制一个矩形
graphics.rect(20, 20, 100, 100);
graphics.fill();
graphics.stroke();

3. 绘制一个圆形：

// 获取graphics组件
var graphics = node.addComponent(cc.Graphics);
 
// 设置填充颜色
graphics.fillColor = cc.Color.BLUE;
 
// 绘制一个圆形
graphics.circle(60, 60, 50);
graphics.fill();
graphics.stroke();

4. 绘制一个椭圆形：

// 获取graphics组件
var graphics = node.addComponent(cc.Graphics);
 
// 设置填充颜色
graphics.fillColor = cc.Color.YELLOW;
 
// 绘制一个椭圆形
graphics.ellipse(120, 60, 100, 50);
graphics.fill();
graphics.stroke();

5. 绘制一个多边形：

// 获取graphics组件
var graphics = node.addComponent(cc.Graphics);
 
// 设置填充颜色
graphics.fillColor = cc.Color.PINK;
 
// 绘制一个多边形
var points = [
    cc.v2(100, 100),
    cc.v2(200, 50),
    cc.v2(150, 150),
    cc.v2(50, 150)
];
graphics.fillPolygon(points, cc.Color.PINK);
graphics.stroke();

以上代码中，每个示例都首先获取了节点上的Graphics组件，然后设置了绘图属性，如线宽、颜色等，并调用相应的绘图函数进行绘制。最后调用stroke()方法来绘制边缘，调用fill()方法来填充图形。