<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p5477mcpsimp"><aname="p5477mcpsimp"></a><aname="p5477mcpsimp"></a>Style to fill an area.</p>
<aname="ul139315155296"></a><aname="ul139315155296"></a><ulid="ul139315155296"><li>When the type is <strongid="b1976845124410"><aname="b1976845124410"></a><aname="b1976845124410"></a><color></strong>, this parameter indicates the color of the filling area.</li><li>When the type is <strongid="b649625984414"><aname="b649625984414"></a><aname="b649625984414"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <strongid="b18594121512451"><aname="b18594121512451"></a><aname="b18594121512451"></a>createLinearGradient()</strong> method.</li><li>When the type is <strongid="b29691524164510"><aname="b29691524164510"></a><aname="b29691524164510"></a>CanvasPattern</strong>, use the <strongid="b8654534204511"><aname="b8654534204511"></a><aname="b8654534204511"></a>createPattern() </strong>method to create a pattern.</li></ul>
<aname="ul53168018260"></a><aname="ul53168018260"></a><ulid="ul53168018260"><li>When the type is <strongid="b32148794613"><aname="b32148794613"></a><aname="b32148794613"></a><color></strong>, this parameter indicates the stroke color.</li><li>When the type is <strongid="b147171125174613"><aname="b147171125174613"></a><aname="b147171125174613"></a>CanvasGradient</strong>, this parameter indicates a gradient object, which is created using the <strongid="b187181825114614"><aname="b187181825114614"></a><aname="b187181825114614"></a>createLinearGradient()</strong> method.</li><li>When the type is <strongid="b1845392834620"><aname="b1845392834620"></a><aname="b1845392834620"></a>CanvasPattern</strong>, use the <strongid="b1445418285464"><aname="b1445418285464"></a><aname="b1445418285464"></a>createPattern() </strong>method to create a pattern.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p388031620530"><aname="p388031620530"></a><aname="p388031620530"></a>Style of the specified line endpoint. The options are as follows:</p>
<aname="ul4880171605310"></a><aname="ul4880171605310"></a><ulid="ul4880171605310"><li><strongid="b51667367466"><aname="b51667367466"></a><aname="b51667367466"></a>butt</strong>: The endpoints of the line are squared off.</li><li><strongid="b136621446114613"><aname="b136621446114613"></a><aname="b136621446114613"></a>round</strong>: The endpoints of the line are rounded.</li><li><strongid="b1596164914466"><aname="b1596164914466"></a><aname="b1596164914466"></a>square</strong>: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p1529212156559"><aname="p1529212156559"></a><aname="p1529212156559"></a>Style of the intersection point between line segments. The options are as follows:</p>
<aname="ul929219154551"></a><aname="ul929219154551"></a><ulid="ul929219154551"><li><strongid="b1395911213478"><aname="b1395911213478"></a><aname="b1395911213478"></a>round</strong>: The intersection is a sector, whose radius at the rounded corner is equal to the line width.</li><li><strongid="b1733165194715"><aname="b1733165194715"></a><aname="b1733165194715"></a>bevel</strong>: The intersection is a triangle. The rectangular corner of each line is independent.</li><li><strongid="b18637161144716"><aname="b18637161144716"></a><aname="b18637161144716"></a>miter</strong>: 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 <strongid="b146371711184719"><aname="b146371711184719"></a><aname="b146371711184719"></a>miterLimit</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p1797319176594"><aname="p1797319176594"></a><aname="p1797319176594"></a>Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.</p>
<tdclass="cellrowborder"valign="top"width="9.650965096509651%"headers="mcps1.1.5.1.3 "><pid="p5122135214815"><aname="p5122135214815"></a><aname="p5122135214815"></a>"normal normal 14px sans-serif"</p>
<aname="ul128041227164715"></a><aname="ul128041227164715"></a><ulid="ul128041227164715"><li>(Optional) <strongid="b1661817155018"><aname="b1661817155018"></a><aname="b1661817155018"></a>font-style</strong>: specifies the font style. Available values are <strongid="b6618710500"><aname="b6618710500"></a><aname="b6618710500"></a>normal</strong> and <strongid="b1561914118503"><aname="b1561914118503"></a><aname="b1561914118503"></a>italic</strong>.</li><li>(Optional) <strongid="b686619610505"><aname="b686619610505"></a><aname="b686619610505"></a>font-weight</strong>: specifies the font weight. Available values are as follows: <strongid="b88671563505"><aname="b88671563505"></a><aname="b88671563505"></a>normal</strong>, <strongid="b118671469502"><aname="b118671469502"></a><aname="b118671469502"></a>bold</strong>, <strongid="b1868865502"><aname="b1868865502"></a><aname="b1868865502"></a>bolder</strong>, <strongid="b186812635017"><aname="b186812635017"></a><aname="b186812635017"></a>lighter</strong>, <strongid="b786996125013"><aname="b786996125013"></a><aname="b786996125013"></a>100</strong>, <strongid="b58698675012"><aname="b58698675012"></a><aname="b58698675012"></a>200</strong>, <strongid="b587020613504"><aname="b587020613504"></a><aname="b587020613504"></a>300</strong>, <strongid="b14870166115017"><aname="b14870166115017"></a><aname="b14870166115017"></a>400</strong>, <strongid="b187120635018"><aname="b187120635018"></a><aname="b187120635018"></a>500</strong>, <strongid="b188719685011"><aname="b188719685011"></a><aname="b188719685011"></a>600</strong>, <strongid="b20871186105019"><aname="b20871186105019"></a><aname="b20871186105019"></a>700</strong>, <strongid="b13872164503"><aname="b13872164503"></a><aname="b13872164503"></a>800</strong>, <strongid="b12872562502"><aname="b12872562502"></a><aname="b12872562502"></a>900</strong></li><li>(Optional) <strongid="b16979204015504"><aname="b16979204015504"></a><aname="b16979204015504"></a>font-size</strong>: specifies the font size and its row height. The unit can only be pixels.</li><li>(Optional) <strongid="b203833438501"><aname="b203833438501"></a><aname="b203833438501"></a>font-family</strong>: specifies the font family. Available values are <strongid="b1384104313504"><aname="b1384104313504"></a><aname="b1384104313504"></a>sans-serif</strong>, <strongid="b1438484365014"><aname="b1438484365014"></a><aname="b1438484365014"></a>serif</strong>, and <strongid="b1738504310507"><aname="b1738504310507"></a><aname="b1738504310507"></a>monospace</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p1268512328512"><aname="p1268512328512"></a><aname="p1268512328512"></a>Text alignment mode. Available values are as follows:</p>
<aname="ul47713282523"></a><aname="ul47713282523"></a><ulid="ul47713282523"><li><strongid="b239931418519"><aname="b239931418519"></a><aname="b239931418519"></a>left</strong>: The text is left-aligned.</li><li><strongid="b149317195119"><aname="b149317195119"></a><aname="b149317195119"></a>right</strong>: The text is right-aligned.</li><li><strongid="b12166174551511"><aname="b12166174551511"></a><aname="b12166174551511"></a>center</strong>: The text is center-aligned.</li><li><strongid="b34311647161"><aname="b34311647161"></a><aname="b34311647161"></a>start</strong>: The text is aligned with the start bound.</li><li><strongid="b1142411721715"><aname="b1142411721715"></a><aname="b1142411721715"></a>end</strong>: The text is aligned with the end bound.</li></ul>
<divclass="note"id="note18771928165213"><aname="note18771928165213"></a><aname="note18771928165213"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p977142811526"><aname="p977142811526"></a><aname="p977142811526"></a>In the <strongid="b385912505119"><aname="b385912505119"></a><aname="b385912505119"></a>ltr</strong> layout mode, the value <strongid="b3859725195119"><aname="b3859725195119"></a><aname="b3859725195119"></a>start</strong> equals <strongid="b88601025175113"><aname="b88601025175113"></a><aname="b88601025175113"></a>left</strong>. In the <strongid="b986032585116"><aname="b986032585116"></a><aname="b986032585116"></a>rtl</strong> layout mode, the value <strongid="b286112519518"><aname="b286112519518"></a><aname="b286112519518"></a>start</strong> equals <strongid="b386132525113"><aname="b386132525113"></a><aname="b386132525113"></a>right</strong>.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p1662319249536"><aname="p1662319249536"></a><aname="p1662319249536"></a>Horizontal alignment mode of text. Available values are as follows:</p>
<aname="ul1944781165420"></a><aname="ul1944781165420"></a><ulid="ul1944781165420"><li><strongid="b178013013529"><aname="b178013013529"></a><aname="b178013013529"></a>alphabetic</strong>: The text baseline is the normal alphabetic baseline.</li><li><strongid="b792167145217"><aname="b792167145217"></a><aname="b792167145217"></a>top</strong>: The text baseline is on the top of the text bounding box.</li><li><strongid="b1581815532520"><aname="b1581815532520"></a><aname="b1581815532520"></a>hanging</strong>: The text baseline is a hanging baseline over the text.</li><li><strongid="b199155911255"><aname="b199155911255"></a><aname="b199155911255"></a>middle</strong>: The text baseline is in the middle of the text bounding box.</li><li><strongid="b19375174142615"><aname="b19375174142615"></a><aname="b19375174142615"></a>ideographic</strong>: 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.</li><li><strongid="b1488614923012"><aname="b1488614923012"></a><aname="b1488614923012"></a>bottom</strong>: 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.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p674954211197"><aname="p674954211197"></a><aname="p674954211197"></a>Offset of the dashed line. The precision is float.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p254163517229"><aname="p254163517229"></a><aname="p254163517229"></a>Composition operation type. Available values are as follows: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor. For details, see <ahref="#li15554182282920">Types</a>.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p7664103673118"><aname="p7664103673118"></a><aname="p7664103673118"></a>Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p588164310356"><aname="p588164310356"></a><aname="p588164310356"></a>X-axis shadow offset relative to the original object.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p1830451623810"><aname="p1830451623810"></a><aname="p1830451623810"></a>Y-axis shadow offset relative to the original object.</p>
<tdclass="cellrowborder"valign="top"width="49.63496349634964%"headers="mcps1.1.5.1.4 "><pid="p83431253164015"><aname="p83431253164015"></a><aname="p83431253164015"></a>Whether to adjust the image smoothness during image drawing. The value <strongid="b1464933895711"><aname="b1464933895711"></a><aname="b1464933895711"></a>true</strong> indicates that the feature is enabled, and the value <strongid="b81314795820"><aname="b81314795820"></a><aname="b81314795820"></a>false</strong> indicates that the feature is disabled.</p>
| [fillStyle](#fillstyle) | \<color> \|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | - | Style to fill an area.<br>- When the type is **<color>**, this parameter indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. |
| [lineWidth](#linewidth) | number | - | Line width. |
| [strokeStyle](#strokestyle) | \<color> \|[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)\| CanvasPattern | - | Stroke style.<br>- When the type is **<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.<br>- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. |
| [lineCap](#linecap) | string | butt | Style of the specified line endpoint. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness. |
| [lineJoin](#linejoin) | 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](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. |
| [font](#font) | string | "normal normal 14px sans-serif" | Font style.<br>Syntax: ctx.font="font-style font-weight font-size font-family"<sup>5+</sup><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](#textalign) | 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](#textbaseline) | 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. |
| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. |
| [globalCompositeOperation](#globalcompositeoperation) | string | source-over | Composition operation type. Available values are as follows: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor. For details, see [Operation types](#globalcompositeoperation). |
| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. |
| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. |
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p8532457197"><a name="p8532457197"></a><a name="p8532457197"></a>Displays the new drawing above the existing drawing. This attribute is used by default.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p18532195161910"><a name="p18532195161910"></a><a name="p18532195161910"></a>Displays the new drawing on the top of the existing drawing.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p4533155181911"><a name="p4533155181911"></a><a name="p4533155181911"></a>Displays part of the new drawing that is outside of the existing drawing.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p18534758191"><a name="p18534758191"></a><a name="p18534758191"></a>Displays part of the existing drawing that is outside of the new drawing.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p1853465101910"><a name="p1853465101910"></a><a name="p1853465101910"></a>Displays both the new drawing and the existing drawing.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p45351851199"><a name="p45351851199"></a><a name="p45351851199"></a>Displays the new drawing and neglects the existing drawing.</p>
<td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="p9535145111912"><a name="p9535145111912"></a><a name="p9535145111912"></a>Combines the new drawing and existing drawing using the XOR operation.</p>
</td>
</tr>
</tbody>
</table>
### globalCompositeOperation
- Example
- Operation types
| Value | Description |
| ---------------- | ------------------------ |
| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. |
| source-atop | Displays the new drawing on the top of the existing drawing. |
| source-in | Displays the new drawing inside the existing drawing. |
| source-out | Displays part of the new drawing that is outside of the existing drawing. |
| destination-over | Displays the existing drawing above the new drawing. |
| destination-atop | Displays the existing drawing on the top of the new drawing. |
| destination-in | Displays the existing drawing inside the new drawing. |
| destination-out | Displays part of the existing drawing that is outside of the new drawing. |
| lighter | Displays both the new drawing and the existing drawing. |
| copy | Displays the new drawing and neglects the existing drawing. |
| xor | Combines the new drawing and existing drawing using the XOR operation.|
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p57339233473"><a name="p57339233473"></a><a name="p57339233473"></a>X-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p17733823194718"><a name="p17733823194718"></a><a name="p17733823194718"></a>Y-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p177102214157"><a name="p177102214157"></a><a name="p177102214157"></a>X-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p371020211512"><a name="p371020211512"></a><a name="p371020211512"></a>Y-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p919916216177"><a name="p919916216177"></a><a name="p919916216177"></a>X-coordinate of the upper left corner of the rectangle stroke</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1319922191713"><a name="p1319922191713"></a><a name="p1319922191713"></a>Y-coordinate of the upper left corner of the rectangle stroke</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1930835314119"><a name="p1930835314119"></a><a name="p1930835314119"></a>X-coordinate of the lower left corner of the text</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p133087531817"><a name="p133087531817"></a><a name="p133087531817"></a>Y-coordinate of the lower left corner of the text stroke</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1041,52 +705,22 @@ Draws filled text on the canvas.
...
@@ -1041,52 +705,22 @@ Draws filled text on the canvas.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p245110469119"><a name="p245110469119"></a><a name="p245110469119"></a>X-coordinate of the lower left corner of the text</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p245114610113"><a name="p245114610113"></a><a name="p245114610113"></a>Y-coordinate of the lower left corner of the text</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1106,55 +740,25 @@ Draws a text stroke on the canvas.
...
@@ -1106,55 +740,25 @@ Draws a text stroke on the canvas.
<td class="cellrowborder" valign="top" width="80.25%" headers="mcps1.1.3.1.2 "><p id="p1811613179191"><a name="p1811613179191"></a><a name="p1811613179191"></a>Object that contains the text width. You can obtain the width by <strong id="b149819152715"><a name="b149819152715"></a><a name="b149819152715"></a>TextMetrics.width</strong>.</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1176,17 +780,15 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
...
@@ -1176,17 +780,15 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p18360203981915"><a name="p18360203981915"></a><a name="p18360203981915"></a>X-coordinate of the first parameter of the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p13605397190"><a name="p13605397190"></a><a name="p13605397190"></a>Y-coordinate of the first parameter of the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p736183918197"><a name="p736183918197"></a><a name="p736183918197"></a>X-coordinate of the second parameter of the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p23611039151912"><a name="p23611039151912"></a><a name="p23611039151912"></a>Y-coordinate of the second parameter of the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p10361339111918"><a name="p10361339111918"></a><a name="p10361339111918"></a>X-coordinate of the end point on the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p183611739201916"><a name="p183611739201916"></a><a name="p183611739201916"></a>Y-coordinate of the end point on the bezier curve</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1563,59 +1029,23 @@ Draws a cubic bezier curve on the canvas.
...
@@ -1563,59 +1029,23 @@ Draws a cubic bezier curve on the canvas.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p2411115835318"><a name="p2411115835318"></a><a name="p2411115835318"></a>X-coordinate of the end point on the bezier curve</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1635875105417"><a name="p1635875105417"></a><a name="p1635875105417"></a>Y-coordinate of the end point on the bezier curve</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1637,73 +1067,25 @@ Draws a quadratic curve on the canvas.
...
@@ -1637,73 +1067,25 @@ Draws a quadratic curve on the canvas.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p17501119939"><a name="p17501119939"></a><a name="p17501119939"></a>X-coordinate of the center point of the arc</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p155119191135"><a name="p155119191135"></a><a name="p155119191135"></a>Y-coordinate of the center point of the arc</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p9153193132218"><a name="p9153193132218"></a><a name="p9153193132218"></a>X-coordinate of the first point on the arc</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p415323111221"><a name="p415323111221"></a><a name="p415323111221"></a>Y-coordinate of the first point on the arc</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p8153103162219"><a name="p8153103162219"></a><a name="p8153103162219"></a>X-coordinate of the second point on the arc</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p21541315229"><a name="p21541315229"></a><a name="p21541315229"></a>Y-coordinate of the second point on the arc</p>
| rotation | number | Rotation angle of the ellipse. The unit is radian. |
</th>
| startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. |
</tr>
| endAngle | number | Angle of the end point for drawing the ellipse. The unit is radian. |
</thead>
| anticlockwise | number | Whether to draw the ellipse counterclockwise. The value **0** means clockwise, and **1** means counterclockwise. This parameter is optional. The default value is **0**.|
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p68251856152212"><a name="p68251856152212"></a><a name="p68251856152212"></a>Rotation angle of the ellipse. The unit is radian.</p>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p128261156112214"><a name="p128261156112214"></a><a name="p128261156112214"></a>Angle of the start point for drawing the ellipse. The unit is radian.</p>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p0826185652215"><a name="p0826185652215"></a><a name="p0826185652215"></a>Angle of the end point for drawing the ellipse. The angle is represented by radians.</p>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p6826115692210"><a name="p6826115692210"></a><a name="p6826115692210"></a>Whether to draw the ellipse in the anticlockwise direction. The value <strong id="b20875727141322"><a name="b20875727141322"></a><a name="b20875727141322"></a>0</strong> indicates clockwise and the value <strong id="b163074859241322"><a name="b163074859241322"></a><a name="b163074859241322"></a>1</strong> indicates anticlockwise. This parameter is optional. The default value is <strong id="b1386411518019"><a name="b1386411518019"></a><a name="b1386411518019"></a>0</strong>.</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -1905,59 +1185,23 @@ Draws an ellipse in the specified rectangular region.
...
@@ -1905,59 +1185,23 @@ Draws an ellipse in the specified rectangular region.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p18490371834"><a name="p18490371834"></a><a name="p18490371834"></a>X-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p784933710317"><a name="p784933710317"></a><a name="p784933710317"></a>Y-coordinate of the upper left corner of the rectangle</p>
<td class="cellrowborder" valign="top" width="67.27672767276727%" headers="mcps1.1.4.1.3 "><p id="p37620540238"><a name="p37620540238"></a><a name="p37620540238"></a>Clockwise rotation angle. You can use <strong id="b12121174014"><a name="b12121174014"></a><a name="b12121174014"></a>Math.PI / 180</strong> to convert the angle to a radian.</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -2086,51 +1308,27 @@ Rotates a canvas clockwise around its coordinate axes.
...
@@ -2086,51 +1308,27 @@ Rotates a canvas clockwise around its coordinate axes.
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.
<td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="p6345155419252"><a name="p6345155419252"></a><a name="p6345155419252"></a>X-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
<td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="p1734505402511"><a name="p1734505402511"></a><a name="p1734505402511"></a>Y-coordinate of the upper left corner of the rectangle used to crop the source image.</p>
<td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="p5347195482515"><a name="p5347195482515"></a><a name="p5347195482515"></a>X-coordinate of the upper left corner of the drawing area on the canvas.</p>
<td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="p5347155415258"><a name="p5347155415258"></a><a name="p5347155415258"></a>Y-coordinate of the upper left corner of the drawing area on the canvas.</p>
Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](js-components-canvas-canvasgradient.md).
Creates a linear gradient and returns a **CanvasGradient** object. For details, see [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md).
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p163983282614"><a name="p163983282614"></a><a name="p163983282614"></a>X-coordinate of the end point.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p939173219269"><a name="p939173219269"></a><a name="p939173219269"></a>Y-coordinate of the end point.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p64981353152618"><a name="p64981353152618"></a><a name="p64981353152618"></a>Y-coordinate of the center of the start circle.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p124981253122616"><a name="p124981253122616"></a><a name="p124981253122616"></a>Radius of the start circle, which must be a non-negative finite number.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p44991538268"><a name="p44991538268"></a><a name="p44991538268"></a>X-coordinate of the center of the end circle.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p15499195318265"><a name="p15499195318265"></a><a name="p15499195318265"></a>Y-coordinate of the center of the end circle.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p13500135317263"><a name="p13500135317263"></a><a name="p13500135317263"></a>Radius of the end circle, The value must be non-negative and limited.</p>
<td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="p2370776271"><a name="p2370776271"></a><a name="p2370776271"></a><strong id="b5491833164819"><a name="b5491833164819"></a><a name="b5491833164819"></a>ImageData</strong> object with the same width and height copied from the original <strong id="b16501733184812"><a name="b16501733184812"></a><a name="b16501733184812"></a>ImageData</strong> object</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1357923192710"><a name="p1357923192710"></a><a name="p1357923192710"></a>X coordinate of the upper left corner of the output area</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p18357152311271"><a name="p18357152311271"></a><a name="p18357152311271"></a>Y coordinate of the upper left corner of the output area</p>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p7360122332718"><a name="p7360122332718"></a><a name="p7360122332718"></a><strong id="b12271164185414"><a name="b12271164185414"></a><a name="b12271164185414"></a>ImageData</strong> object that contains pixels in the specified area on the canvas</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -2997,85 +1784,31 @@ Creates an **ImageData** object with pixels in the specified area on the canva
...
@@ -2997,85 +1784,31 @@ Creates an **ImageData** object with pixels in the specified area on the canva
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p8401173882716"><a name="p8401173882716"></a><a name="p8401173882716"></a><strong id="b986064519565"><a name="b986064519565"></a><a name="b986064519565"></a>ImageData</strong> object with pixels to put onto the canvas</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p174021238172710"><a name="p174021238172710"></a><a name="p174021238172710"></a>X-axis offset of the rectangular area on the canvas</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p184021438162711"><a name="p184021438162711"></a><a name="p184021438162711"></a>Y-axis offset of the rectangular area on the canvas</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p140363822713"><a name="p140363822713"></a><a name="p140363822713"></a>X-axis offset of the upper left corner of the rectangular area relative to that of the source image</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p74045383271"><a name="p74045383271"></a><a name="p74045383271"></a>Y-axis offset of the upper left corner of the rectangular area relative to that of the source image</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1840403813271"><a name="p1840403813271"></a><a name="p1840403813271"></a>Width of the rectangular area to crop the source image</p>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p84051382278"><a name="p84051382278"></a><a name="p84051382278"></a>Height of the rectangular area to crop the source image.</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -3087,8 +1820,8 @@ Puts the **ImageData** onto a rectangular area on the canvas.
...
@@ -3087,8 +1820,8 @@ Puts the **ImageData** onto a rectangular area on the canvas.
//xxx.js
//xxx.js
export default {
export default {
onShow() {
onShow() {
var test = this.$element('getImageData')
const test = this.$element('getImageData')
var ctx = test.getContext('2d');
const ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 0] = 255;
...
@@ -3101,38 +1834,20 @@ Puts the **ImageData** onto a rectangular area on the canvas.
...
@@ -3101,38 +1834,20 @@ Puts the **ImageData** onto a rectangular area on the canvas.
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1859615017276"><a name="p1859615017276"></a><a name="p1859615017276"></a>An array describing the interval of alternate line segments and length of spacing</p>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1783123216281"><a name="p1783123216281"></a><a name="p1783123216281"></a>Interval of alternate line segments and the length of spacing.</p>
</td>
</tr>
</tbody>
</table>
- Example
- Example
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div>
<div>
...
@@ -3199,36 +1900,18 @@ Obtains the dash line style.
...
@@ -3199,36 +1900,18 @@ Obtains the dash line style.
This API creates a button that contains child components. In the syntax, **type** indicates the button type, and **stateEffect** indicates whether to enable the click effect for the button.
`Button(options?: {type?: ButtonType, stateEffect?: boolean})`, where `type` indicates the button type, and `stateEffect` indicates whether to enable the click effect for the button.
```
```
...
@@ -23,8 +24,9 @@ You can create a button by invoking either of the following APIs:
...
@@ -23,8 +24,9 @@ You can create a button by invoking either of the following APIs:
- Create a button that does not contain child components.
This API creates a button that does not contain any child components. In the syntax, **label** indicates whether the created button contains child components.
`Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`, where `label` indicates whether the button contains child components.
```
```
...
@@ -74,9 +76,10 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
...
@@ -74,9 +76,10 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines.
The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines.
@@ -8,7 +8,7 @@ As a tool to provide layout auxiliary lines, the grid system is handy in graphic
...
@@ -8,7 +8,7 @@ As a tool to provide layout auxiliary lines, the grid system is handy in graphic
2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices.
2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices.
3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios.
3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios.
To implement the grid layout, the declarative paradigm provides the \<GridContainer> component, together with the universal attribute useSizeType of its child components.
To implement grid layout, the declarative paradigm provides the [GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md) grid container component, which works with the common attribute useSizeType of its subcomponents to implement grid layout.
## Grid System
## Grid System
...
@@ -23,7 +23,7 @@ The grid system works in terms of columns, margins, and gutters.
...
@@ -23,7 +23,7 @@ The grid system works in terms of columns, margins, and gutters.
2. Margins:
2. Margins:
Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications.
Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications.
3. Columns:
3. Columns:
Main tool for positioning items in the grid layout. The grid container is divided into different columns based on the device size. The width of each column is calculated based on the total number of columns while respecting the margin and clutter specifications.
Main tool for positioning items in the grid layout. The grid container is divided into various numbers of columns based on the device size. The width per column is calculated based on the total number of columns while respecting the margin and clutter specifications.
### Grid Breakpoints
### Grid Breakpoints
...
@@ -32,15 +32,13 @@ Breakpoints in the grid system are set in terms of the device's screen pixel den
...
@@ -32,15 +32,13 @@ Breakpoints in the grid system are set in terms of the device's screen pixel den
Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters.
Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters.
@@ -48,26 +46,28 @@ Create a grid container, define the grid layout, and set the number of columns f
...
@@ -48,26 +46,28 @@ Create a grid container, define the grid layout, and set the number of columns f
### Creating a Grid Container
### Creating a Grid Container
Use the **GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})** API to create a grid container. All child components in the grid container follow the grid layout.
Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` API to create a grid container. All child components in the grid container follow the grid layout.
Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp.
- Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp.
In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp.
In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
```
GridContainer() {}
```
You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below:
On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp.
```
- You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below:
In the preceding example, the **\<Text>** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\<Text>** component occupies three columns and is placed in the first column.
In the preceding example, the **\<Text>** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\<Text>** component occupies three columns and is placed in the first column.
### Grid Settings of Child Components in the Grid Container
### Grid Settings of Child Components in the Grid Container
Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. span indicates the number of columns occupied by the child component. offset indicates the column offset, that is, the column where the component is located. The sample code is as follows:
Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. **span** indicates the number of columns occupied by the child component. **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows:
```
```
GridContainer() {
GridContainer() {
...
@@ -97,7 +98,7 @@ GridContainer() {
...
@@ -97,7 +98,7 @@ GridContainer() {
}
}
}
}
```
```
In the preceding example, **sm: { span: 2, offset: 0 }** indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container.
In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container.
## Example Scenario
## Example Scenario
The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility.
The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility.
...
@@ -108,8 +109,8 @@ The grid layout helps ensure proper display of components among different device
...
@@ -108,8 +109,8 @@ The grid layout helps ensure proper display of components among different device
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600) ** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.|
| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600) ** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.|
| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600) ** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>  **NOTE**<br>> When the **not** operator is used, the media type must be specified.|
| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600) ** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>  **NOTE**<br>> When the **not** operator is used, the media type must be specified.|
| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen and (min-height: 50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>  **NOTE**<br>> When the **only** operator is used, the media type must be specified.|
| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen and (min-height: 50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>  **NOTE**<br>> When the **only** operator is used, the media type must be specified.|
| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000), (round-screen: true) ** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.|
| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000), (round-screen: true) ** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.|
| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or (round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.|
| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or (round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.|
At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the **max-** and **min-**operators.
At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the max- and min-operators.
| height | Height of the display area on the application page.|
| height | Height of the display area on the application page. |
| min-height | Minimum height of the display area on the application page.|
| min-height | Minimum height of the display area on the application page. |
| max-height | Maximum height of the display area on the application page.|
| max-height | Maximum height of the display area on the application page. |
| width | Width of the display area on the app page.|
| width | Width of the display area on the app page. |
| min-width | Minimum width of the display area on the application page.|
| min-width | Minimum width of the display area on the application page. |
| max-width | Maximum width of the display area on the application page.|
| max-width | Maximum width of the display area on the application page. |
| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.|
| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi.|
| min-resolution | Minimum device resolution.|
| min-resolution | Minimum device resolution. |
| max-resolution | Maximum device resolution.|
| max-resolution | Maximum device resolution. |
| orientation | Screen orientation.<br>Options are as follows:<br>- orientation: portrait<br>- orientation: landscape|
| orientation | Screen orientation.<br>Options are as follows:<br>- orientation: portrait<br>- orientation: landscape|
| device-height | Height of the device.|
| device-height | Height of the device. |
| min-device-height | Minimum height of the device.|
| min-device-height | Minimum height of the device.|
| max-device-height | Maximum height of the device.|
| max-device-height | Maximum height of the device.|
| device-width | Width of the device.|
| device-width | Width of the device. |
| min-device-width | Minimum width of the device.|
| min-device-width | Minimum width of the device. |
| max-device-width | Maximum width of the device.|
| max-device-width | Maximum width of the device. |
| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite.|
| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite. |
| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite.|
| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite. |
## Example Scenario
## Example Scenario
...
@@ -138,8 +142,14 @@ Use media queries to apply different content and styles to the page text when th
...
@@ -138,8 +142,14 @@ Use media queries to apply different content and styles to the page text when th
}
}
}
}
```
```
When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br/>
When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br>
