Graphic system

This chapter will show the usage of Cocos Creator's graphic drawing component interface.

Graphics API

Path

Method Function Description
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

Color, Style

Property Description
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.

ccc.raphael