| [lineJoin](js-components-canvas-canvasrenderingcontext2d.md) | string | miter | Style of the intersection point between line segments. The options are as follows: <br/>-**round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width. <br/>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent. <br/>-**miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**. |
| [lineJoin](js-components-canvas-canvasrenderingcontext2d.md) | string | miter | Style of the intersection point between line segments. The options are as follows: <br/>-**round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width. <br/>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent. <br/>-**miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**. |
| [miterLimit](js-components-canvas-canvasrenderingcontext2d.md) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [miterLimit](js-components-canvas-canvasrenderingcontext2d.md) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [font](js-components-canvas-canvasrenderingcontext2d.md) | string | "normal normal 14px sans-serif" | Font style. Syntax: ctx.font="font-style font-weight font-size font-family"5+ <br/>-(Optional) **font-style**: font style. Available values are **normal** and **italic**. <br/>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**. <br/>- (Optional) **font-size**: font size and row height. The unit can only be pixels. <br/>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**. |
| [font](js-components-canvas-canvasrenderingcontext2d.md) | string | "normal normal 14px sans-serif" | Font style. Syntax: ctx.font="font-style font-weight font-size font-family"5+ <br/>-(Optional) **font-style**: font style. Available values are **normal** and **italic**. <br/>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**. <br/>- (Optional) **font-size**: font size and row height. The unit can only be pixels. <br/>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**. |
| [textAlign](js-components-canvas-canvasrenderingcontext2d.md) | string | left | Text alignment mode. Available values are as follows: <br/>- **left**: The text is left-aligned. <br/>-**right**: The text is right-aligned. <br/>- **center**: The text is center-aligned. <br/>- **start**: The text is aligned with the start bound. <br/>- **end**: The text is aligned with the end bound. <br/>>**NOTE**<br/> > In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
| [textAlign](js-components-canvas-canvasrenderingcontext2d.md) | string | left | Text alignment mode. Available values are as follows: <br/>- **left**: The text is left-aligned. <br/>-**right**: The text is right-aligned. <br/>- **center**: The text is center-aligned. <br/>- **start**: The text is aligned with the start bound. <br/>- **end**: The text is aligned with the end bound. <br/>>**NOTE**<br/> > In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. |
| [textBaseline](js-components-canvas-canvasrenderingcontext2d.md) | string | alphabetic | Horizontal alignment mode of text. Available values are as follows:<br/>- **alphabetic**: The text baseline is the normal alphabetic baseline. <br/>- **top**: The text baseline is on the top of the text bounding box. <br/>-**hanging**: The text baseline is a hanging baseline over the text. <br/>- **middle**: The text baseline is in the middle of the text bounding box. <br/>- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character. <br/>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
| [textBaseline](js-components-canvas-canvasrenderingcontext2d.md) | string | alphabetic | Horizontal alignment mode of text. Available values are as follows:<br/>- **alphabetic**: The text baseline is the normal alphabetic baseline. <br/>- **top**: The text baseline is on the top of the text bounding box. <br/>-**hanging**: The text baseline is a hanging baseline over the text. <br/>- **middle**: The text baseline is in the middle of the text bounding box. <br/>- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character. <br/>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. |
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
>
>
> - x' = scaleX * x + skewY * y + translateX
> - x' = scaleX * x + skewY * y + translateX
...
@@ -1374,7 +1374,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
...
@@ -1374,7 +1374,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
