cocos2d-js cc.DrawNode用法示例

         var  draw =  new  cc.DrawNode();                  //创建drawnode对象

         this .addChild(draw, 10);

         var  centerPos = cc.p(winSize.width / 2, winSize.height / 2);

         

         //drawSegment --- 绘制直线

         //用法：draw.drawSegment(from, to, lineWidth, color)

         //参数

         // from:起始点

         // to:终点

         // lineWidth：线条宽度

         // color：线条颜色

         draw.drawSegment(cc.p(0, 0), cc.p(winSize.width, winSize.height), 1, cc.color(255, 0, 255, 255));

         draw.drawSegment(cc.p(0, winSize.height), cc.p(winSize.width, 0), 5, cc.color(255, 0, 0, 255));

         

         //drawDot --- 绘制圆点

         //draw.drawDot(pos, radius, color)

         //draw.drawDots(points, radius, color)     //画点  points  点数组

         draw.drawDot(cc.p(winSize.width / 2, winSize.height / 2), 40, cc.color(0, 0, 255, 128));

         var  points = [cc.p(60, 60), cc.p(70, 70), cc.p(60, 70), cc.p(70, 60)];

         draw.drawDots(points, 4, cc.color(0, 255, 255, 255));

 

         //drawCircle  --- 绘制圆形

         //draw.drawCircle(center, radius, angle, segments, drawLineToCenter, lineWidth, color)

         draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 100, 0, 10,  false , 7, cc.color(0, 255, 0, 255));

         draw.drawCircle(cc.p(winSize.width / 2, winSize.height / 2), 50, cc.degreesToRadians(90), 100,  true , 2, cc.color(0, 255, 255, 255));

         

         //draw poly --- 绘制多边形

         //draw.drawPoly(verts, fillColor, lineWidth, color)

         //not fill

         var  vertices = [cc.p(0, 0), cc.p(50, 50), cc.p(100, 50), cc.p(100, 100), cc.p(50, 100) ];

         draw.drawPoly(vertices,  null , 5, cc.color(255, 255, 0, 255));

         var  vertices2 = [cc.p(30, 130), cc.p(30, 230), cc.p(50, 200)];

         draw.drawPoly(vertices2,  null , 2, cc.color(255, 0, 255, 255));

         //fill

         var  vertices3 = [cc.p(60, 130), cc.p(60, 230), cc.p(80, 200)];

         draw.drawPoly(vertices3, cc.color(0, 255, 255, 50), 2, cc.color(255, 0, 255, 255));

         

         //draw rect --- 绘制矩形

         //draw.drawRect(origin, destination, fillColor, lineWidth, lineColor)

         //not fill

         draw.drawRect(cc.p(120, 120), cc.p(200, 200),  null , 2, cc.color(255, 0, 255, 255));

         //fill

         draw.drawRect(cc.p(120, 220), cc.p(200, 300), cc.color(0, 255, 255, 180), 2, cc.color(128, 128, 0, 255));

         

         // draw quad bezier path --- 绘制二次贝塞尔曲线

         // draw.drawQuadBezier(origin, control, destination, segments, lineWidth, color)

         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));

         

         // draw cubic bezier path --- 绘制三次贝塞尔曲线

         // draw.drawCubicBezier(origin, control1, control2, destination, segments, lineWidth, color)

         draw.drawCubicBezier(cc.p(winSize.width / 2, winSize.height / 2), cc.p(winSize.width / 2 + 30, winSize.height / 2 + 50),

         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));

         

         // draw cardinal spline --- 绘制曲线

         // drawNode.drawCardinalSpline(config, tension, segments, lineWidth, color)

         var  vertices4 = [

             cc.p(centerPos.x - 130, centerPos.y - 130),

             cc.p(centerPos.x - 130, centerPos.y + 130),

             cc.p(centerPos.x + 130, centerPos.y + 130),

             cc.p(centerPos.x + 130, centerPos.y - 130),

             cc.p(centerPos.x - 130, centerPos.y - 130)

         ];

         draw.drawCardinalSpline(vertices4, 0.5, 100, 2, cc.color(255, 255, 255, 255));




转载至http://blog.csdn.net/alex8046/article/details/48548119

在项目中可以自行封装常用的DrawNode方法，如圆形头像的封装