cocos2d-html5教程之绘图draw[转载]

咱们继续上面的课题讲解，今天的主题是cocos2d-html5的绘图Draw。

 

或许看文章朋友您知道，编程有一个思想很重要，那就是“返璞归真”。Cocos2d-html5的绘画是有一个程序统帅，下面给出说明与继承关系图。

 

 

在图中不难看出其中的关系。

 

• Defined in: CCDrawingPrimitives.js
  
• Extends cc.Class
  

其中，cc.DrawingPrimitive()绘图原语的实用程序类。

 

 

下面我们列出其中的方法列表供大家参考：

 

 

其中的叙述方式是方法名称和描述组成：

 

 

ctor(renderContext)

 

 

Constructor构造函数

 

 

drawCircle(center,radius, angle, segments, drawLineToCenter)

绘制一个圆形.

 

 

drawCubicBezier(origin, control1, control2, destination, segments)

 

 

绘制立方体贝塞尔曲线

 

 

drawLine(origin,destination)

 

 

画一条线

 

drawPoint(point)

 

 

给出了一个点的x和y坐标测量的点

 

 

drawPoints(points,numberOfPoints)

 

 

画一个数组的点。

 

 

drawPoly(vertices,numOfVertices, closePolygon, fill)

 

 

通过一个给定一个指针cc.Pointpoligon coordiantes和给定的顶点数及测量的点来绘制图形.

 

 

drawQuadBezier(origin, control, destination, segments

)

 

绘制一个drawQuadBezier

 

 

getRenderContext()

 

 

返回被渲染的原始绘图上下文 环境

 

 

setRenderContext(context)

 

 

设置渲染上下文的绘图原始环境

 

 

本人不善于言谈，还是真刀实枪来的真实，看代码。

 

 

本例子来自cocos2d-html5官网的test中的DrawPrimitivesTest比较经典，大家可以去官网下载：http://www.cocos2d-x.org/

下面是代码，很简单：

1. var s = cc.Director.sharedDirector().getWinSize();
2. cc.renderContext.fillStyle = "rgba(255,255,255,1)";//上下文填充颜色
3. cc.renderContext.strokeStyle = "rgba(255,255,255,1)";
4. cc.drawingUtil.drawLine(cc.PointMake(0,0), cc.PointMake(s.width, s.height));//画一条线

复制代码

另外需要解释的是，大家可能会迷惑怎么是cc.drawingUtil执行画布操作，大家不要忘记了CCApplication它的功能概述如下：

1）初始化程序，构建运行窗口；
2）程序初始化完毕通知；
3）程序被切换到后台通知；
4）程序切换到前台通知；
5）设置屏幕窗口原点：设备是水平的还是垂直的，在左边还是在右边（或者顶端还是底部）
6）程序运行（进行消息循环处理）
7）取得当前语言配置
8）所有对Application的访问都通过CCApplication.sharedApplication()提供

我在分析源码的时候在cocos2d\platform\CCApplication.js找到如下代码：

 

1. cc.drawingUtil = newcc.DrawingPrimitiveCanvas(cc.renderContext);

复制代码

 

相信大家现在已经明白了，cc.drawingUtil只是代理DrawingPrimitiveCanvas执行相关的程序。

原文链接：http://www.html5so.com