環境： cocos2d lua 3.10  Visual studio 2013

cocos 繪圖的方式有兩種：

1. DrawPrimitives

2. DrawNode,比第一種繪製要快，繼承於Node

關於DrawNode的使用方法：

-- 建立drawNode，並新增到指定的層中
local drawNode = cc.DrawNode:create()
self:addChild(drawNode, 10)

-- 繪製點
local pointpos = cc.p(460,460)          -- 點位置
local pointSize = 100
 
                   -- 點大小
local color = cc.c4f(0.8, 1, 0.8, 1)    -- 顏色，取值範圍0~1之間
drawNode:drawPoint(pointpos, pointSize, color)

-- 繪製一組點
local pointGroup = {                    -- 點位置組
    cc.p(160,160), cc.p(170,170), cc.p(160,170), 
    cc.p(170,160), cc.p(170,180)
}
local pointNum = #pointGroup            --
 
 點數目
pointSize = 1                           -- 點大小
color = cc.c4f(0.8, 1, 0.8, 1)          -- 顏色，取值範圍0~1之間
drawNode:drawPoints(pointGroup, pointNum, pointSize, color)

-- 繪製線段
local origin = cc.p(0,0)                              -- 起始點
local destination = cc.p(size.width, size.height)     -- 結束點
local color = cc.c4f(0
 
,1,0,1)                         -- 線段顏色，取值範圍0~1之間
drawNode:drawLine(origin, destination, color)

-- 繪製有粗度的線條
local from = cc.p(size.width*3/4,100)         -- 起始點 
local to = cc.p(size.width*3/4,size.height/2) -- 結束點
local radius = 100                            -- 段半徑
local color = cc.c4f(0, 1, 1, 1)              -- 線條顏色
drawNode:drawSegment(from, to, radius, color)

-- 繪製空心矩形
local anglepos1 = cc.p(123,123)         -- 對角線原點
local anglepos2 = cc.p(700,400)         -- 對角線終點
local color = cc.c4f(1,1,0,1)           -- 顏色
drawNode:drawRect(anglepos1, anglepos2, color)

-- 繪製實心矩形
local anglepos1 = cc.p(200,200)         -- 對角線原點
local anglepos2 = cc.p(600,300)         -- 對角線終點
local color = cc.c4f(1,1,1,1)           -- 顏色
drawNode:drawSolidRect(anglepos1, anglepos2, color)

-- 繪製空心多邊形
local poliGroup = {cc.p(30,130), cc.p(30,230),  -- 點位置組
    cc.p(50,200),cc.p(60,270),cc.p(80,20)
}        
local poliNum = #poliGroup                      -- 點數目
local isClose = true                            -- 是否封閉多邊形，true為是
local color = cc.c4f(math.random(0,1), math.random(0,1), math.random(0,1), 1)
drawNode:drawPoly(poliGroup, poliNum, isClose, color)

-- 繪製實心多邊形
local poliGroup = {cc.p(130,130), cc.p(130,230),  -- 點位置組
    cc.p(150,200),cc.p(160,270),cc.p(180,20)}        
local poliNum = #poliGroup                        -- 點數目
local color = cc.c4f(math.random(0,1), math.random(0,1), math.random(0,1), 1)
drawNode:drawSolidPoly(poliGroup, poliNum, color)

-- 繪製空心橢圓
local center = cc.p(680 ,360)           -- 圓心
local radius = 50                       -- 半徑
local angle = math.pi/2                 -- 角度 
local segments = 100                    -- 段數(可理解為繪製drawPoly的點數目)
local drawLineToCenter = true           -- 是否繪製原點到圓心的直線
local scaleX, scaleY = 2.0, 1.0         -- 中心縮放值(兩值相等就是圓)
local color = cc.c4f(1,1,0,1)           -- 顏色
drawNode:drawCircle(center,radius,angle,segments,drawLineToCenter,scaleX,scaleY,color)

-- 繪製實心橢圓
local center = cc.p(480 ,360)           -- 圓心
local radius = 100                      -- 半徑
local angle = math.pi/2                 -- 角度 
local segments = 100                    -- 段數(可理解為繪製drawPoly的點數目)
local scaleX, scaleY = 2.0, 1.0         -- 中心縮放值(兩值相等就是圓)
local color = cc.c4f(1,0,0,1)           -- 顏色
drawNode:drawSolidCircle(center, radius, angle, segments, scaleX, scaleY, color)

-- 繪製貝塞爾曲線
local origin = cc.p(size.width - 150, size.height - 150)               -- 原點
local control = cc.p(size.width - 70, size.height - 10)                -- 控制點
local destination = cc.p(size.width - 10, size.height - 10)            -- 終點
local color = cc.c4f(1,0,0,1)                                          -- 顏色
drawNode:drawQuadBezier(origin, control, destination, 10, color)

-- 繪製三次貝塞爾曲線
local origin = cc.p(480,360)        -- 原點
local control = cc.p(10,410)        -- 控制點1
local control2 = cc.p(40,310)       -- 控制點2
local destination = cc.p(0,640)     -- 終點
local segments = 100                -- 段數(可理解為繪製drawPoly的點數目)
local color = cc.c4f(1,1,1,1)       -- 顏色
drawNode:drawCubicBezier(origin, control, control2, control2, segments, color)
    
--繪製畫基數樣條
local pointArray = {                -- 陣列點
    cc.p(200, 80),              
    cc.p(size.width - 130, 80),
    cc.p(size.width - 130, size.height - 180),
    cc.p(0, size.height - 180),
    cc.p(200, 80) 
}
local tension = 0.1                 -- 張力(數值越大，越平整)
local segments = 50                 -- 段數(可理解為繪製drawPoly的點數目)
local color = cc.c4f(0.8, 0.7, 1, 1)-- 樣條顏色
drawNode:drawCardinalSpline(pointArray,tension,segments,color)

-- 
local pointArray = {                           -- 指向控制點的點陣列
    cc.p(size.width/2, 30),
    cc.p(size.width - 80, 30),
    cc.p(size.width - 80, size.height - 80),
    cc.p(size.width/2, size.height - 80),
    cc.p(size.width/2, 30) 
}
local segments = 50                             -- 段數
local color = cc.c4f(1, 0, 1, 1)                -- 顏色
drawNode:drawCatmullRom(pointArray, segments, color)

-- 繪製圓
for i=1, 10 do
    local pos = cc.p(size.width/4, size.height*3/4)     -- 原點
    local radius = 10*(10-i)                            -- 半徑
    local color = cc.c4f(math.random(0,1),math.random(0,1),math.random(0,1),1)
    drawNode:drawDot(pos, radius, color)
end

-- 繪製一個帶有填充色和線條色的多邊形
local o, w, h = 80, 20, 50
local verts = {                        -- 點座標組
    cc.p(o, o), cc.p(o + w, o - h), cc.p(o + w*2, o),   -- lower spike
    cc.p(o + w*2 + h, o + w ), cc.p(o + w*2, o + w*2),  -- right spike
    cc.p(o + w, o + w*2 + h), cc.p(o, o + w*2),         -- top spike
    cc.p(o - h, o + w),                                 -- left spike
}
local count = #verts                    -- 點數目
local fillColor = cc.c4f(1,0,0,0.5)     -- 填充顏色
local borderWidth = 1                   -- 線條寬度
local borderColor = cc.c4f(0,0,1,1)     -- 線條顏色
drawNode:drawPolygon(verts, count, fillColor, borderWidth, borderColor)

其效果圖：