This chapter will show the usage of Cocos Creator's graphic drawing component interface.
|moveTo (x, y)||Move the path to a specified point in the canvas without creating a line|
|lineTo (x, y)||Add a new point, and then create a line from the point to the last specified point in the canvas|
|bezierCurveTo (c1x, c1y, c2x, c2y, x, y)||Create cubic cubic Bezier curve|
|quadraticCurveTo (cx, cy, x, y)||Create a second Bezier curve|
| arc (cx, cy, r, a0, a1, counterclockwise) | Create arc / curve (for creating circle or part of a circle) | ellipse (cx, cy, rx, ry) | create an ellipse | circle (cx, cy, r) | create a circle | rect (x, y, w, h) | create a rectangle | close () | Create a path from the current point back to the starting point | stroke () | Draw a defined path | fill () | Fill the current drawing (path) | clear () | Clear all paths
|lineCap||Set or return the end of the line end style|
|lineJoin||the corner type created when setting or returning two lines intersecting|
|lineWidth||Sets or returns the current line width|
|miterLimit||Set or return the maximum miter length|
|strokeColor||Sets or returns the color of the stroke|
|fillColor||Set or return the color of the fill painting|
Third Party Library
The Graphics component's API is designed according to the [Canvas] (http://www.w3school.com.cn/tags/html_ref_canvas.asp) drawing interface, and there are a lot of graphics libraries based on the Canvas drawing interface, such as paper.js, raphael.js. Using the standard canvas drawing interfaces and thrid party libraries, we can extend a lot of more advanced functions on the Graphics components.
Here are some third-party advanced drawing libraries and related demo based on Graphics component extensions.