# Cocos creator画线 {#cocos-creator画线}

本文讲述基于跨平台游戏引擎cocos creator开发的项目中，如何画线，以及需要注意的点。

# 1. 使用cc.Graphics组件画线 {#_1-使用cc-graphics组件画线}

cc.Graphics组件可以画线，支持直线、圆形、矩形、多边形的绘画。
demo代码如下:

        let ctx = this.node.getComponent(cc.Graphics);
        // ctx.lineWidth = 3;

        // 画第1条线
        // 从(100,100)到(300,300)画一条宽为3像素的绿色直线
        ctx.strokeColor = cc.Color.YELLOW;
        ctx.moveTo(100, 100);
        ctx.lineTo(300, 300);
        ctx.stroke();  
        
        // 清除历史的线, 若执行clear方法，则第1条线会被清除
        // ctx.clear();

        // 画第2条线
        ctx.strokeColor = cc.Color.GREEN;
        ctx.moveTo(200, 200);
        ctx.lineTo(50, 400);
        ctx.stroke(); 

如上demo对应的源码地址: cocos creator 画线 (opens new window)。

需要注意如下2点:

1. 和物理组件类似，实际应用中发现, 组件cc.Graphics不能绑定到cc.Sprite类型的节点上，否则没有绘画效果。

可以为组件组件cc.Graphics创建个专用的空节点，用该节点来实现画线。

2. 使用组件cc.Graphics画线时，指定坐标点时, 参考坐标系并不是当前节点的父节点坐标系(按本地坐标系的定义，您可能会这么认为, 但实际上非也)，而是当前节点坐标系。