绘制图形

1. var draw = new cc.DrawNode();                 //创建drawnode对象  
2.         this.addChild(draw, 10);  
3.         var centerPos = cc.p(winSize.width / 2, winSize.height / 2);  
4.            
5.         //drawSegment --- 绘制直线  
6.         //用法：draw.drawSegment(from, to, lineWidth, color)  
7.         //参数  
8.         // from:起始点  
9.         // to:终点  
10.         // lineWidth：线条宽度  
11.         // color：线条颜色  
12.         draw.drawSegment(cc.p(0, 0), cc.p(winSize.width, winSize.height), 1, cc.color(255, 0, 255, 255));  
13.         draw.drawSegment(cc.p(0, winSize.height), cc.p(winSize.width, 0), 5, cc.color(255, 0, 0, 255));  
14.            
15.         //drawDot --- 绘制圆点  
16.         //draw.drawDot(pos, radius, color)  
17.         //draw.drawDots(points, radius, color)     //画点  points  点数组  
18.         draw.drawDot(cc.p(winSize.width / 2, winSize.height / 2), 40, cc.color(0, 0, 255, 128));  
19.         var points = [cc.p(60, 60), cc.p(70, 70), cc.p(60, 70), cc.p(70, 60)];  
20.         draw.drawDots(points, 4, cc.color(0, 255, 255, 255));  
21.    
22.         //drawCircle  --- 绘制圆形  
23.         //draw.drawCircle(center, radius, angle, segments, drawLineToCenter, lineWidth, color)  
24.         draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 100, 0, 10, false, 7, cc.color(0, 255, 0, 255));  
25.         draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 50, cc.degreesToRadians(90), 100, true, 2, cc.color(0, 255, 255, 255));  
26.            
27.         //draw poly --- 绘制多边形  
28.         //draw.drawPoly(verts, fillColor, lineWidth, color)  
29.         //not fill  
30.         var vertices = [cc.p(0, 0), cc.p(50, 50), cc.p(100, 50), cc.p(100, 100), cc.p(50, 100) ];  
31.         draw.drawPoly(vertices, null, 5, cc.color(255, 255, 0, 255));  
32.         var vertices2 = [cc.p(30, 130), cc.p(30, 230), cc.p(50, 200)];  
33.         draw.drawPoly(vertices2, null, 2, cc.color(255, 0, 255, 255));  
34.         //fill  
35.         var vertices3 = [cc.p(60, 130), cc.p(60, 230), cc.p(80, 200)];  
36.         draw.drawPoly(vertices3, cc.color(0, 255, 255, 50), 2, cc.color(255, 0, 255, 255));  
37.            
38.         //draw rect --- 绘制矩形  
39.         //draw.drawRect(origin, destination, fillColor, lineWidth, lineColor)  
40.         //not fill  
41.         draw.drawRect(cc.p(120, 120), cc.p(200, 200), null, 2, cc.color(255, 0, 255, 255));  
42.         //fill  
43.         draw.drawRect(cc.p(120, 220), cc.p(200, 300), cc.color(0, 255, 255, 180), 2, cc.color(128, 128, 0, 255));  
44.            
45.         // draw quad bezier path --- 绘制二次贝塞尔曲线  
46.         // draw.drawQuadBezier(origin, control, destination, segments, lineWidth, color)  
47.         draw.drawQuadBezier(cc.p(0, winSize.height), cc.p(centerPos.x, centerPos.y), cc.p(winSize.width, winSize.height), 50, 2, cc.color(255, 0, 255, 255));  
48.            
49.         // draw cubic bezier path --- 绘制三次贝塞尔曲线  
50.         // draw.drawCubicBezier(origin, control1, control2, destination, segments, lineWidth, color)  
51.         draw.drawCubicBezier(cc.p(winSize.width / 2, winSize.height / 2), cc.p(winSize.width / 2 + 30, winSize.height / 2 + 50),  
52.         cc.p(winSize.width / 2 + 60, winSize.height / 2 - 50), cc.p(winSize.width, winSize.height / 2), 100, 2, cc.color(255, 0, 255, 255));  
53.            
54.         // draw cardinal spline --- 绘制曲线  
55.         // drawNode.drawCardinalSpline(config, tension, segments, lineWidth, color)  
56.         var vertices4 = [  
57.             cc.p(centerPos.x - 130, centerPos.y - 130),  
58.             cc.p(centerPos.x - 130, centerPos.y + 130),  
59.             cc.p(centerPos.x + 130, centerPos.y + 130),  
60.             cc.p(centerPos.x + 130, centerPos.y - 130),  
61.             cc.p(centerPos.x - 130, centerPos.y - 130)  
62.         ];  
63.         draw.drawCardinalSpline(vertices4, 0.5, 100, 2, cc.color(255, 255, 255, 255));