Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 2f4dc689 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (13549) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 9c7545af
显示空白变更内容
内联 并排
Showing with 670 addition and 645 deletion
en/application-dev/reference/apis/js-apis-inputmethod.md
浏览文件 @ 2f4dc689
...@@ -13,7 +13,7 @@ The **inputMethod** module provides an input method framework, which can be used ...@@ -13,7 +13,7 @@ The **inputMethod** module provides an input method framework, which can be used
import inputMethod from '@ohos.inputmethod'; import inputMethod from '@ohos.inputmethod';
``` ```
## Constants ## Constants<sup>8+</sup>
Provides the constants. Provides the constants.
...@@ -23,7 +23,7 @@ Provides the constants. ...@@ -23,7 +23,7 @@ Provides the constants.
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| MAX_TYPE_NUM | number | 128 | Maximum number of supported input methods.| | MAX_TYPE_NUM | number | 128 | Maximum number of supported input methods.|
## InputMethodProperty ## InputMethodProperty<sup>8+</sup>
Describes the input method application attributes. Describes the input method application attributes.
...@@ -56,7 +56,7 @@ Obtains an **[InputMethodController](#inputmethodcontroller)** instance. ...@@ -56,7 +56,7 @@ Obtains an **[InputMethodController](#inputmethodcontroller)** instance.
let inputMethodController = inputMethod.getInputMethodController(); let inputMethodController = inputMethod.getInputMethodController();
``` ```
## inputMethod.getInputMethodSetting ## inputMethod.getInputMethodSetting<sup>8+</sup>
getInputMethodSetting(): InputMethodSetting getInputMethodSetting(): InputMethodSetting
...@@ -136,7 +136,7 @@ inputMethodController.stopInput().then((result) => { ...@@ -136,7 +136,7 @@ inputMethodController.stopInput().then((result) => {
}) })
``` ```
## InputMethodSetting ## InputMethodSetting<sup>8+</sup>
In the following API examples, you must first use [getInputMethodSetting](#inputmethodgetinputmethodsetting) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [getInputMethodSetting](#inputmethodgetinputmethodsetting) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance.
...@@ -152,7 +152,7 @@ Obtains a list of installed input methods. This API uses an asynchronous callbac ...@@ -152,7 +152,7 @@ Obtains a list of installed input methods. This API uses an asynchronous callbac
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | -------------------------------------------------- | ---- | ---------------------- | | -------- | -------------------------------------------------- | ---- | ---------------------- |
| callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty)>&gt; | Yes | Callback used to return the list of installed input methods.| | callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty8)>&gt; | Yes | Callback used to return the list of installed input methods.|
**Example** **Example**
...@@ -166,7 +166,7 @@ inputMethodSetting.listInputMethod((err, data) => { ...@@ -166,7 +166,7 @@ inputMethodSetting.listInputMethod((err, data) => {
}); });
``` ```
### listInputMethod ### listInputMethod<sup>8+</sup>
listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt; listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt;
...@@ -190,7 +190,7 @@ inputMethodSetting.listInputMethod().then((data) => { ...@@ -190,7 +190,7 @@ inputMethodSetting.listInputMethod().then((data) => {
}) })
``` ```
### displayOptionalInputMethod ### displayOptionalInputMethod<sup>8+</sup>
displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void
...@@ -216,7 +216,7 @@ inputMethodSetting.displayOptionalInputMethod((err) => { ...@@ -216,7 +216,7 @@ inputMethodSetting.displayOptionalInputMethod((err) => {
}); });
``` ```
### displayOptionalInputMethod ### displayOptionalInputMethod<sup>8+</sup>
displayOptionalInputMethod(): Promise&lt;void&gt; displayOptionalInputMethod(): Promise&lt;void&gt;
......
en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 2f4dc689
# CanvasRenderingContext2D # CanvasRenderingContext2D
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas. **CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas.
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -44,36 +45,40 @@ ...@@ -44,36 +45,40 @@
![screenshot-8](figures/screenshot-8.png) ![screenshot-8](figures/screenshot-8.png)
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------- | ------------------------------------------------------------ | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](js-components-canvas-canvasrenderingcontext2d.md) | \<color> \| [CanvasGradient](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. | | [fillStyle](#fillstyle) | &lt;color&gt; \| [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](js-components-canvas-canvasrenderingcontext2d.md) | number | - | Line width. | | [lineWidth](#linewidth) | number | Line width. |
| [strokeStyle](js-components-canvas-canvasrenderingcontext2d.md) | \<color> \| [CanvasGradient](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. | | [strokeStyle](#strokestyle) | &lt;color&gt; \| [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](js-components-canvas-canvasrenderingcontext2d.md) | 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. | | [lineCap](#linecap) | string | 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.<br>Default value: **butt**|
| [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](#linejoin) | string | 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**.<br>Default value: **miter**|
| [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](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10** |
| [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](#font) | string | 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**.<br>Default value: **"normal normal 14px sans-serif"**|
| [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/>>![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. | | [textAlign](#textalign) | string | 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>In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.<br>Default value: **left**|
| [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](#textbaseline) | string | 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.<br>Default value: **alphabetic**|
| [globalAlpha](js-components-canvas-canvasrenderingcontext2d.md) | number | - | Opacity. <br/>**0.0**: completely transparent. <br/>**1.0**: completely opaque. | | [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
| [lineDashOffset](js-components-canvas-canvasrenderingcontext2d.md) | number | 0.0 | Offset of the dashed line. The precision is float. | | [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>Default value: **0.0** |
| [globalCompositeOperation](js-components-canvas-canvasrenderingcontext2d.md) | 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](js-components-canvas-canvasrenderingcontext2d.md). | | [globalCompositeOperation](#globalcompositeoperation) | string | 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).<br>Default value: **ource-over**|
| [shadowBlur](js-components-canvas-canvasrenderingcontext2d.md) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. | | [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**|
| [shadowColor](js-components-canvas-canvasrenderingcontext2d.md) | \<color> | - | Shadow color. | | [shadowColor](#shadowcolor) | &lt;color&gt; | Shadow color. |
| [shadowOffsetX](js-components-canvas-canvasrenderingcontext2d.md) | number | - | X-axis shadow offset relative to the original object. | | [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. |
| [shadowOffsetY](js-components-canvas-canvasrenderingcontext2d.md) | number | - | Y-axis shadow offset relative to the original object. | | [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. |
| [imageSmoothingEnabled](js-components-canvas-canvasrenderingcontext2d.md)6+ | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. | | [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**|
### fillStyle ### fillStyle
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -87,6 +92,7 @@ export default { ...@@ -87,6 +92,7 @@ export default {
![en-us_image_0000001166962736](figures/en-us_image_0000001166962736.png) ![en-us_image_0000001166962736](figures/en-us_image_0000001166962736.png)
### lineWidth ### lineWidth
``` ```
...@@ -94,6 +100,9 @@ export default { ...@@ -94,6 +100,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -103,10 +112,12 @@ export default { ...@@ -103,10 +112,12 @@ export default {
ctx.strokeRect(25, 25, 85, 105); ctx.strokeRect(25, 25, 85, 105);
} }
} }
``` ```
![en-us_image_0000001166484430](figures/en-us_image_0000001166484430.png) ![en-us_image_0000001166484430](figures/en-us_image_0000001166484430.png)
### strokeStyle ### strokeStyle
``` ```
...@@ -114,6 +125,9 @@ export default { ...@@ -114,6 +125,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -126,6 +140,7 @@ export default { ...@@ -126,6 +140,7 @@ export default {
} }
``` ```
![en-us_image_0000001212124299](figures/en-us_image_0000001212124299.png) ![en-us_image_0000001212124299](figures/en-us_image_0000001212124299.png)
### lineCap ### lineCap
...@@ -135,6 +150,9 @@ export default { ...@@ -135,6 +150,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -159,6 +177,9 @@ export default { ...@@ -159,6 +177,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -184,6 +205,9 @@ export default { ...@@ -184,6 +205,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -202,6 +226,7 @@ export default { ...@@ -202,6 +226,7 @@ export default {
![en-us_image_0000001167001464](figures/en-us_image_0000001167001464.png) ![en-us_image_0000001167001464](figures/en-us_image_0000001167001464.png)
### font ### font
``` ```
...@@ -209,6 +234,9 @@ export default { ...@@ -209,6 +234,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -222,6 +250,7 @@ export default { ...@@ -222,6 +250,7 @@ export default {
![en-us_image_0000001167046832](figures/en-us_image_0000001167046832.png) ![en-us_image_0000001167046832](figures/en-us_image_0000001167046832.png)
### textAlign ### textAlign
``` ```
...@@ -229,6 +258,9 @@ export default { ...@@ -229,6 +258,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -252,8 +284,10 @@ export default { ...@@ -252,8 +284,10 @@ export default {
ctx.fillText('textAlign=right',140, 140); ctx.fillText('textAlign=right',140, 140);
} }
} }
``` ```
![en-us_image_0000001167472798](figures/en-us_image_0000001167472798.png) ![en-us_image_0000001167472798](figures/en-us_image_0000001167472798.png)
### textBaseline ### textBaseline
...@@ -263,6 +297,9 @@ export default { ...@@ -263,6 +297,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -296,6 +333,9 @@ export default { ...@@ -296,6 +333,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -320,6 +360,9 @@ export default { ...@@ -320,6 +360,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -337,31 +380,34 @@ export default { ...@@ -337,31 +380,34 @@ export default {
### globalCompositeOperation ### globalCompositeOperation
- Operation types Enumerates the operation types.
| Value | Description | | Value | Description |
| ---------------- | ------------------------------------------------------------ | | ---------------- | ------------------------ |
| source-over | Displays the new drawing above the existing drawing. This attribute is used by default. | | 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-atop | Displays the new drawing on the top of the existing drawing. |
| source-in | Displays the new drawing inside 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. | | 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-over | Displays the existing drawing above the new drawing. |
| destination-atop | Displays the existing drawing on the top of 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-in | Displays the existing drawing inside the new drawing. |
| destination-out | Displays part of the existing drawing that is outside of the new drawing. | | destination-out | Displays the existing drawing outside the new drawing. |
| lighter | Displays both the new drawing and the existing drawing. | | lighter | Displays both the new and existing drawing. |
| copy | Displays the new drawing and neglects 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. | | xor | Combines the new drawing and existing drawing using the XOR operation.|
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
//xxx.js ```
export default {
```
//xxx.js
export default {
onShow() { onShow() {
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
...@@ -377,20 +423,23 @@ export default { ...@@ -377,20 +423,23 @@ export default {
ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(150, 50, 50, 50); ctx.fillRect(150, 50, 50, 50);
} }
} }
``` ```
![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png) ![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png)
In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
### shadowBlur ### shadowBlur
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -413,6 +462,9 @@ export default { ...@@ -413,6 +462,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -435,6 +487,9 @@ export default { ...@@ -435,6 +487,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -449,6 +504,7 @@ export default { ...@@ -449,6 +504,7 @@ export default {
} }
``` ```
![en-us_image_0000001167631876](figures/en-us_image_0000001167631876.png) ![en-us_image_0000001167631876](figures/en-us_image_0000001167631876.png)
### shadowOffsetY ### shadowOffsetY
...@@ -458,6 +514,9 @@ export default { ...@@ -458,6 +514,9 @@ export default {
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -474,13 +533,16 @@ export default { ...@@ -474,13 +533,16 @@ export default {
![en-us_image_0000001213193285](figures/en-us_image_0000001213193285.png) ![en-us_image_0000001213193285](figures/en-us_image_0000001213193285.png)
### imageSmoothingEnabled6+ ### imageSmoothingEnabled<sup>6+</sup>
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
```
```
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -498,41 +560,47 @@ export default { ...@@ -498,41 +560,47 @@ export default {
![smoothoff](figures/smoothoff.png) ![smoothoff](figures/smoothoff.png)
## Methods ## Methods
### fillRect ### fillRect
fillRect(x: number, y: number, width:number, height: number): void fillRect(x: number, y: number, width:number, height: number): void
Fills a rectangle on the canvas. Fills a rectangle on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------------------------------------------------------- | | ------ | ------ | ------------- |
| x | number | X-coordinate of the upper left corner of the rectangle. | | x | number | X-coordinate of the upper left corner of the rectangle.|
| y | number | Y-coordinate of the upper left corner of the rectangle. | | y | number | Y-coordinate of the upper left corner of the rectangle.|
| width | number | Width of the rectangle. | | width | number | Width of the rectangle. |
| height | number | Height of the rectangle. | | height | number | Height of the rectangle. |
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div> </div>
//xxx.js ```
export default {
```
//xxx.js
export default {
onShow() { onShow() {
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
ctx.fillRect(20, 20, 200, 150); ctx.fillRect(20, 20, 200, 150);
} }
} }
``` ```
![en-us_image_0000001214811029](figures/en-us_image_0000001214811029.png) ![en-us_image_0000001214811029](figures/en-us_image_0000001214811029.png)
### clearRect ### clearRect
...@@ -540,17 +608,16 @@ clearRect(x: number, y: number, width:number, height: number): void ...@@ -540,17 +608,16 @@ clearRect(x: number, y: number, width:number, height: number): void
Clears the content in a rectangle on the canvas. Clears the content in a rectangle on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------------------------------------------------------- | | ------ | ------ | ------------- |
| x | number | X-coordinate of the upper left corner of the rectangle. | | x | number | X-coordinate of the upper left corner of the rectangle.|
| y | number | Y-coordinate of the upper left corner of the rectangle. | | y | number | Y-coordinate of the upper left corner of the rectangle.|
| width | number | Width of the rectangle. | | width | number | Width of the rectangle. |
| height | number | Height of the rectangle. | | height | number | Height of the rectangle. |
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -573,23 +640,23 @@ Clears the content in a rectangle on the canvas. ...@@ -573,23 +640,23 @@ Clears the content in a rectangle on the canvas.
![en-us_image_0000001214619417](figures/en-us_image_0000001214619417.png) ![en-us_image_0000001214619417](figures/en-us_image_0000001214619417.png)
### strokeRect ### strokeRect
strokeRect(x: number, y: number, width:number, height: number): void strokeRect(x: number, y: number, width:number, height: number): void
Draws a rectangle stroke on the canvas. Draws a rectangle stroke on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ |
| x | number | X-coordinate of the upper left corner of the rectangle stroke. |
| y | number | Y-coordinate of the upper left corner of the rectangle stroke. |
| width | number | Width of the rectangle. |
| height | number | Height of the rectangle. |
- Example | Name | Type | Description |
| ------ | ------ | ------------ |
| x | number | X-coordinate of the upper left corner of the rectangle stroke.|
| y | number | Y-coordinate of the upper left corner of the rectangle stroke.|
| width | number | Width of the rectangle. |
| height | number | Height of the rectangle. |
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -610,22 +677,22 @@ Draws a rectangle stroke on the canvas. ...@@ -610,22 +677,22 @@ Draws a rectangle stroke on the canvas.
![en-us_image_0000001214822091](figures/en-us_image_0000001214822091.png) ![en-us_image_0000001214822091](figures/en-us_image_0000001214822091.png)
### fillText ### fillText
fillText(text: string, x: number, y: number): void fillText(text: string, x: number, y: number): void
Draws filled text on the canvas. Draws filled text on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ---- | ------ | -------------------------------------------------- |
| text | string | Text to draw. |
| x | number | X-coordinate of the lower left corner of the text. |
| y | number | Y-coordinate of the lower left corner of the text. |
- Example | Name | Type | Description |
| ---- | ------ | --------------- |
| text | string | Text to draw. |
| x | number | X-coordinate of the lower left corner of the text.|
| y | number | Y-coordinate of the lower left corner of the text.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -653,16 +720,15 @@ strokeText(text: string, x: number, y: number): void ...@@ -653,16 +720,15 @@ strokeText(text: string, x: number, y: number): void
Draws a text stroke on the canvas. Draws a text stroke on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | -------------------------------------------------- | | ---- | ------ | --------------- |
| text | string | Text to draw. | | text | string | Text to draw. |
| x | number | X-coordinate of the lower left corner of the text. | | x | number | X-coordinate of the lower left corner of the text.|
| y | number | Y-coordinate of the lower left corner of the text. | | y | number | Y-coordinate of the lower left corner of the text.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -690,20 +756,19 @@ measureText(text: string): TextMetrics ...@@ -690,20 +756,19 @@ measureText(text: string): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text. Returns a **TextMetrics** object used to obtain the width of specified text.
- Parameters **Parameters**
| Name | Type | Description |
| ---- | ------ | -------------------- |
| text | string | Text to be measured. |
- Return value | Name | Type | Description |
| ---- | ------ | ---------- |
| text | string | Text to be measured.|
| Type | Description | **Return value**
| ----------- | ------------------------------------------------------------ |
| TextMetrics | Object that contains the text width. You can obtain the width by **TextMetrics.width**. |
- Example | Type | Description |
| ----------- | -------------------------------------- |
| TextMetrics | Object that contains the text width. You can obtain the width by **TextMetrics.width**.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -727,14 +792,13 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -727,14 +792,13 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
![en-us_image_0000001169142476](figures/en-us_image_0000001169142476.png) ![en-us_image_0000001169142476](figures/en-us_image_0000001169142476.png)
### stroke
### stroke
stroke(): void stroke(): void
Draws a stroke. Draws a stroke.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -759,14 +823,13 @@ Draws a stroke. ...@@ -759,14 +823,13 @@ Draws a stroke.
![en-us_image_0000001236697937](figures/en-us_image_0000001236697937.png) ![en-us_image_0000001236697937](figures/en-us_image_0000001236697937.png)
### beginPath
### beginPath
beginPath(): void beginPath(): void
Creates a drawing path. Creates a drawing path.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -792,21 +855,20 @@ Creates a drawing path. ...@@ -792,21 +855,20 @@ Creates a drawing path.
![en-us_image_0000001214629745](figures/en-us_image_0000001214629745.png) ![en-us_image_0000001214629745](figures/en-us_image_0000001214629745.png)
### moveTo
### moveTo
moveTo(x: number, y: number): void moveTo(x: number, y: number): void
Moves a drawing path to a target position on the canvas. Moves a drawing path to a target position on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ---- | ------ | ------------------------------------ |
| x | number | X-coordinate of the target position. |
| y | number | Y-coordinate of the target position. |
- Example | Name | Type | Description |
| ---- | ------ | --------- |
| x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -830,21 +892,20 @@ Moves a drawing path to a target position on the canvas. ...@@ -830,21 +892,20 @@ Moves a drawing path to a target position on the canvas.
![en-us_image_0000001169309948](figures/en-us_image_0000001169309948.png) ![en-us_image_0000001169309948](figures/en-us_image_0000001169309948.png)
### lineTo
### lineTo
lineTo(x: number, y: number): void lineTo(x: number, y: number): void
Connects the current point to a target position using a straight line. Connects the current point to a target position using a straight line.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | ------------------------------------ | | ---- | ------ | --------- |
| x | number | X-coordinate of the target position. | | x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position. | | y | number | Y-coordinate of the target position.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -868,14 +929,13 @@ Connects the current point to a target position using a straight line. ...@@ -868,14 +929,13 @@ Connects the current point to a target position using a straight line.
![en-us_image_0000001169469914](figures/en-us_image_0000001169469914.png) ![en-us_image_0000001169469914](figures/en-us_image_0000001169469914.png)
### closePath
### closePath
closePath(): void closePath(): void
Draws a closed path. Draws a closed path.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -907,21 +967,20 @@ createPattern(image: Image, repetition: string): Object ...@@ -907,21 +967,20 @@ createPattern(image: Image, repetition: string): Object
Creates a pattern for image filling based on a specified source image and repetition mode. Creates a pattern for image filling based on a specified source image and repetition mode.
- Parameters **Parameters**
| Name | Type | Description |
| ---------- | ------ | ------------------------------------------------------------ |
| image | Image | Source image. For details, see [Image](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/js-components-canvas-image.md). |
| repetition | string | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**. |
- Return value | Name | Type | Description |
| ---------- | ------ | ---------------------------------------- |
| image | Image | Source image. For details, see [Image](../arkui-js/js-components-canvas-image.md).|
| repetition | string | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
| Type | Description | **Return value**
| ------ | ------------------------- |
| Object | Pattern of image filling. |
- Example | Type | Description |
| ------ | ----------------- |
| Object | Pattern of image filling.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -952,19 +1011,18 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -952,19 +1011,18 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas. Draws a cubic bezier curve on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | --------------------------------------------------------- | | ---- | ------ | -------------- |
| cp1x | number | X-coordinate of the first parameter of the bezier curve. | | cp1x | number | X-coordinate of the first parameter of the bezier curve.|
| cp1y | number | Y-coordinate of the first parameter of the bezier curve. | | cp1y | number | Y-coordinate of the first parameter of the bezier curve.|
| cp2x | number | X-coordinate of the second parameter of the bezier curve. | | cp2x | number | X-coordinate of the second parameter of the bezier curve.|
| cp2y | number | Y-coordinate of the second parameter of the bezier curve. | | cp2y | number | Y-coordinate of the second parameter of the bezier curve.|
| x | number | X-coordinate of the end point on the bezier curve. | | x | number | X-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. | | y | number | Y-coordinate of the end point on the bezier curve. |
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -994,17 +1052,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -994,17 +1052,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas. Draws a quadratic curve on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ---- | ------ | -------------------------------------------------- |
| cpx | number | X-coordinate of the bezier curve parameter. |
| cpy | number | Y-coordinate of the bezier curve parameter. |
| x | number | X-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. |
- Example | Name | Type | Description |
| ---- | ------ | ----------- |
| cpx | number | X-coordinate of the bezier curve parameter.|
| cpy | number | Y-coordinate of the bezier curve parameter.|
| x | number | X-coordinate of the end point on the bezier curve.|
| y | number | Y-coordinate of the end point on the bezier curve.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1028,25 +1085,24 @@ Draws a quadratic curve on the canvas. ...@@ -1028,25 +1085,24 @@ Draws a quadratic curve on the canvas.
![en-us_image_0000001169461910](figures/en-us_image_0000001169461910.png) ![en-us_image_0000001169461910](figures/en-us_image_0000001169461910.png)
### arc
### arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void
Draws an arc on the canvas. Draws an arc on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------------- | ------- | -------------------------------------------- | | ------------- | ------- | ---------- |
| x | number | X-coordinate of the center point of the arc. | | x | number | X-coordinate of the center point of the arc.|
| y | number | Y-coordinate of the center point of the arc. | | y | number | Y-coordinate of the center point of the arc.|
| radius | number | Radius of the arc. | | radius | number | Radius of the arc. |
| startAngle | number | Start radian of the arc. | | startAngle | number | Start radian of the arc. |
| endAngle | number | End radian of the arc. | | endAngle | number | End radian of the arc. |
| anticlockwise | boolean | Whether to draw the arc counterclockwise. | | anticlockwise | boolean | Whether to draw the arc counterclockwise.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1075,18 +1131,17 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1075,18 +1131,17 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc. Draws an arc based on the radius and points on the arc.
- Parameters **Parameters**
| Name | Type | Description |
| ------ | ------ | -------------------------------------------- |
| x1 | number | X-coordinate of the first point on the arc. |
| y1 | number | Y-coordinate of the first point on the arc. |
| x2 | number | X-coordinate of the second point on the arc. |
| y2 | number | Y-coordinate of the second point on the arc. |
| radius | number | Radius of the arc. |
- Example | Name | Type | Description |
| ------ | ------ | --------------- |
| x1 | number | X-coordinate of the first point on the arc.|
| y1 | number | Y-coordinate of the first point on the arc.|
| x2 | number | X-coordinate of the second point on the arc.|
| y2 | number | Y-coordinate of the second point on the arc.|
| radius | number | Radius of the arc. |
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1101,7 +1156,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -1101,7 +1156,7 @@ Draws an arc based on the radius and points on the arc.
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
ctx.moveTo(100, 20); ctx.moveTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
ctx.stroke(); ctx.stroke();
} }
} }
...@@ -1109,27 +1164,26 @@ Draws an arc based on the radius and points on the arc. ...@@ -1109,27 +1164,26 @@ Draws an arc based on the radius and points on the arc.
![en-us_image_0000001169143586](figures/en-us_image_0000001169143586.png) ![en-us_image_0000001169143586](figures/en-us_image_0000001169143586.png)
### ellipse6+ ### ellipse<sup>6+</sup>
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void
Draws an ellipse in the specified rectangular region on the canvas. Draws an ellipse in the specified rectangular region on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ------------- | ------ | ------------------------------------------------------------ |
| x | number | X-coordinate of the ellipse center. |
| y | number | Y-coordinate of the ellipse center. |
| radiusX | number | Ellipse radius on the x-axis. |
| radiusY | number | Ellipse radius on the y-axis. |
| rotation | number | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. |
| endAngle | number | Angle of the end point for drawing the ellipse. The unit is radian. |
| 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**. |
- Example | Name | Type | Description |
| ------------- | ------ | ------------------------------------ |
| x | number | X-coordinate of the ellipse center. |
| y | number | Y-coordinate of the ellipse center. |
| radiusX | number | Ellipse radius on the x-axis. |
| radiusY | number | Ellipse radius on the y-axis. |
| rotation | number | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. |
| endAngle | number | Angle of the end point for drawing the ellipse. The unit is radian. |
| 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**.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1152,23 +1206,22 @@ Draws an ellipse in the specified rectangular region on the canvas. ...@@ -1152,23 +1206,22 @@ Draws an ellipse in the specified rectangular region on the canvas.
![ellipse](figures/ellipse.png) ![ellipse](figures/ellipse.png)
### rect
### rect
rect(x: number, y: number, width: number, height: number): void rect(x: number, y: number, width: number, height: number): void
Creates a rectangle on the canvas. Creates a rectangle on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------------------------------------------------------- | | ------ | ------ | ------------- |
| x | number | X-coordinate of the upper left corner of the rectangle. | | x | number | X-coordinate of the upper left corner of the rectangle.|
| y | number | Y-coordinate of the upper left corner of the rectangle. | | y | number | Y-coordinate of the upper left corner of the rectangle.|
| width | number | Width of the rectangle. | | width | number | Width of the rectangle. |
| height | number | Height of the rectangle. | | height | number | Height of the rectangle. |
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1182,7 +1235,7 @@ Creates a rectangle on the canvas. ...@@ -1182,7 +1235,7 @@ Creates a rectangle on the canvas.
onShow() { onShow() {
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20). ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
ctx.stroke(); // Draw it ctx.stroke(); // Draw it
} }
} }
...@@ -1196,8 +1249,7 @@ fill(): void ...@@ -1196,8 +1249,7 @@ fill(): void
Fills the area inside a closed path on the canvas. Fills the area inside a closed path on the canvas.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1211,8 +1263,8 @@ Fills the area inside a closed path on the canvas. ...@@ -1211,8 +1263,8 @@ Fills the area inside a closed path on the canvas.
onShow() { onShow() {
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20). ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
ctx.fill(); // Fill the rectangle using default settings. ctx.fill(); // Draw it in default setting
} }
} }
``` ```
...@@ -1225,8 +1277,7 @@ clip(): void ...@@ -1225,8 +1277,7 @@ clip(): void
Sets the current path to a clipping path. Sets the current path to a clipping path.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1243,7 +1294,7 @@ Sets the current path to a clipping path. ...@@ -1243,7 +1294,7 @@ Sets the current path to a clipping path.
ctx.rect(0, 0, 200, 200); ctx.rect(0, 0, 200, 200);
ctx.stroke(); ctx.stroke();
ctx.clip(); ctx.clip();
// Clip a rectangle and fill it with red paint. // Draw red rectangle after clip
ctx.fillStyle = "rgb(255,0,0)"; ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0, 0, 150, 150); ctx.fillRect(0, 0, 150, 150);
} }
...@@ -1258,14 +1309,13 @@ rotate(rotate: number): void ...@@ -1258,14 +1309,13 @@ rotate(rotate: number): void
Rotates a canvas clockwise around its coordinate axes. Rotates a canvas clockwise around its coordinate axes.
- Parameters **Parameters**
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ |
| rotate | number | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian. |
- Example | Name | Type | Description |
| ------ | ------ | ---------------------------------------- |
| rotate | number | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1293,15 +1343,14 @@ scale(x: number, y: number): void ...@@ -1293,15 +1343,14 @@ scale(x: number, y: number): void
Scales the canvas based on scale factors. Scales the canvas based on scale factors.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | ------------------------ | | ---- | ------ | ----------- |
| x | number | Horizontal scale factor. | | x | number | Horizontal scale factor.|
| y | number | Vertical scale factor. | | y | number | Vertical scale factor.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1316,7 +1365,7 @@ Scales the canvas based on scale factors. ...@@ -1316,7 +1365,7 @@ Scales the canvas based on scale factors.
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx = el.getContext('2d'); const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25); ctx.strokeRect(10, 10, 25, 25);
ctx.scale(2, 2);// Scale to 200%. ctx.scale(2, 2);// Scale to 200%
ctx.strokeRect(10, 10, 25, 25); ctx.strokeRect(10, 10, 25, 25);
} }
} }
...@@ -1330,25 +1379,25 @@ transform(scaleX: number, skewX: number, skewY: number, scale: number, translate ...@@ -1330,25 +1379,25 @@ transform(scaleX: number, skewX: number, skewY: number, scale: number, translate
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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**<br>
> 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
> - y' = skewX * x + scaleY * y + translateY >
> - y' = skewX \* x + scaleY \* y + translateY
- Parameters
| Name | Type | Description | **Parameters**
| ---------- | ------ | ------------------- |
| scaleX | number | X-axis scale. |
| skewX | number | X-axis skew. |
| skewY | number | Y-axis skew. |
| scaleY | number | Y-axis scale. |
| translateX | number | X-axis translation. |
| translateY | number | Y-axis translation. |
- Example | Name | Type | Description |
| ---------- | ------ | -------- |
| scaleX | number | X-axis scale.|
| skewX | number | X-axis skew.|
| skewY | number | Y-axis skew.|
| scaleY | number | Y-axis scale.|
| translateX | number | X-axis translation.|
| translateY | number | Y-axis translation.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1380,21 +1429,20 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -1380,21 +1429,20 @@ Defines a transformation matrix. To transform a graph, you only need to set para
setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function. Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---------- | ------ | ------------------- | | ---------- | ------ | -------- |
| scaleX | number | X-axis scale. | | scaleX | number | X-axis scale.|
| skewX | number | X-axis skew. | | skewX | number | X-axis skew.|
| skewY | number | Y-axis skew. | | skewY | number | Y-axis skew.|
| scaleY | number | Y-axis scale. | | scaleY | number | Y-axis scale.|
| translateX | number | X-axis translation. | | translateX | number | X-axis translation.|
| translateY | number | Y-axis translation. | | translateY | number | Y-axis translation.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1425,15 +1473,14 @@ translate(x: number, y: number): void ...@@ -1425,15 +1473,14 @@ translate(x: number, y: number): void
Moves the origin of the coordinate system. Moves the origin of the coordinate system.
- Parameters **Parameters**
| Name | Type | Description |
| ---- | ------ | ------------------- |
| x | number | X-axis translation. |
| y | number | Y-axis translation. |
- Example | Name | Type | Description |
| ---- | ------ | -------- |
| x | number | X-axis translation.|
| y | number | Y-axis translation.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1456,23 +1503,24 @@ Moves the origin of the coordinate system. ...@@ -1456,23 +1503,24 @@ Moves the origin of the coordinate system.
![en-us_image_0000001169144864](figures/en-us_image_0000001169144864.png) ![en-us_image_0000001169144864](figures/en-us_image_0000001169144864.png)
### createPath2D6+ ### createPath2D<sup>6+</sup>
createPath2D(path: Path2D, cmds: string): Path2D createPath2D(path: Path2D, cmds: string): Path2D
Creates a **Path2D** object. Creates a **Path2D** object.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | ---------------------------------- | | ---- | ------ | -------------- |
| path | Path2D | **Path2D** object. | | path | Path2D | **Path2D** object. |
| cmds | string | Path description of the SVG image. | | cmds | string | Path description of the SVG image.|
- Return value [Path2D object](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md) **Return value**
- Example [Path2D object](../arkui-js/js-components-canvas-path2d.md)
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1508,22 +1556,21 @@ drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, ...@@ -1508,22 +1556,21 @@ drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number,
Draws an image on the canvas. Draws an image on the canvas.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ------- | ------ | ------------------------------------------------------------ | | ------- | ------------------------------ | ---------------------------------------- |
| image | Image | Source image. For details, see [Image](js-components-canvas-image.md). | | image | Image \| PixelMap<sup>9+</sup> | Image resource. For details, see [Image](../arkui-js/js-components-canvas-image.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7).|
| sx | number | X-coordinate of the upper left corner of the rectangle used to crop the source image. | | sx | number | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | | sy | number | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sWidth | number | Target width to crop the source image. | | sWidth | number | Target width to crop the source image. |
| sHeight | number | Target height to crop the source image. | | sHeight | number | Target height to crop the source image. |
| dx | number | X-coordinate of the upper left corner of the drawing area on the canvas. | | dx | number | X-coordinate of the upper left corner of the drawing area on the canvas. |
| dy | number | Y-coordinate of the upper left corner of the drawing area on the canvas. | | dy | number | Y-coordinate of the upper left corner of the drawing area on the canvas. |
| dWidth | number | Width of the drawing area. | | dWidth | number | Width of the drawing area. |
| dHeight | number | Height of the drawing area. | | dHeight | number | Height of the drawing area. |
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1552,8 +1599,7 @@ restore(): void ...@@ -1552,8 +1599,7 @@ restore(): void
Restores the saved drawing context. Restores the saved drawing context.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1578,8 +1624,7 @@ save(): void ...@@ -1578,8 +1624,7 @@ save(): void
Saves the current drawing context. Saves the current drawing context.
- Example **Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1598,29 +1643,28 @@ Saves the current drawing context. ...@@ -1598,29 +1643,28 @@ Saves the current drawing context.
} }
``` ```
### createLinearGradient6+ ### createLinearGradient<sup>6+</sup>
createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
Creates a linear gradient and returns a **CanvasGradient** object. 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).
- Parameters
| Name | Type | Description | **Parameters**
| ---- | ------ | -------------------------------- |
| x0 | number | X-coordinate of the start point. |
| y0 | number | Y-coordinate of the start point. |
| x1 | number | X-coordinate of the end point. |
| y1 | number | Y-coordinate of the end point. |
- Return value | Name | Type | Description |
| ---- | ------ | -------- |
| x0 | number | X-coordinate of the start point.|
| y0 | number | Y-coordinate of the start point.|
| x1 | number | X-coordinate of the end point.|
| y1 | number | Y-coordinate of the end point.|
| Type | Description | **Return value**
| ------ | ---------------------------------- |
| Object | Created **CanvasGradient** object. |
- Example | Type | Description |
| ------ | ---------------------- |
| Object | Created **CanvasGradient** object.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1638,9 +1682,9 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details, ...@@ -1638,9 +1682,9 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
// Linear gradient: start(50,0) end(300,100) // Linear gradient: start(50,0) end(300,100)
var gradient = ctx.createLinearGradient(50,0, 300,100); var gradient = ctx.createLinearGradient(50,0, 300,100);
// Add three color stops // Add three color stops
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, '#ff0000');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, '#ffffff');
gradient.addColorStop(1.0, 'green'); gradient.addColorStop(1.0, '#00ff00');
// Set the fill style and draw a rectangle // Set the fill style and draw a rectangle
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500); ctx.fillRect(0, 0, 500, 500);
...@@ -1650,31 +1694,30 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details, ...@@ -1650,31 +1694,30 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
![en-us_image_0000001169303416](figures/en-us_image_0000001169303416.png) ![en-us_image_0000001169303416](figures/en-us_image_0000001169303416.png)
### createRadialGradient6+ ### createRadialGradient<sup>6+</sup>
createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Object createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Object
Creates a radial gradient and returns a **CanvasGradient** object. Creates a radial gradient and returns a **CanvasGradient** object.
- Parameters **Parameters**
| Name | Type | Description | | Name | Type | Description |
| ---- | ------ | ------------------------------------------------------------ | | ---- | ------ | ----------------- |
| x0 | number | X-coordinate of the center of the start circle. | | x0 | number | X-coordinate of the center of the start circle. |
| y0 | number | Y-coordinate of the center of the start circle. | | y0 | number | Y-coordinate of the center of the start circle. |
| r0 | number | Radius of the start circle, which must be a non-negative finite number. | | r0 | number | Radius of the start circle, which must be a non-negative finite number.|
| x1 | number | X-coordinate of the center of the end circle. | | x1 | number | X-coordinate of the center of the end circle. |
| y1 | number | Y-coordinate of the center of the end circle. | | y1 | number | Y-coordinate of the center of the end circle. |
| r1 | number | Radius of the end circle, which must be a non-negative finite number. | | r1 | number | Radius of the end circle, which must be a non-negative finite number.|
- Return value **Return value**
| Type | Description | | Type | Description |
| ------ | ---------------------------------- | | ------ | ---------------------- |
| Object | Created **CanvasGradient** object. | | Object | Created **CanvasGradient** object.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1692,9 +1735,9 @@ Creates a radial gradient and returns a **CanvasGradient** object. ...@@ -1692,9 +1735,9 @@ Creates a radial gradient and returns a **CanvasGradient** object.
// Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
// Add three color stops // Add three color stops
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, '#ff0000');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, '#ffffff');
gradient.addColorStop(1.0, 'green'); gradient.addColorStop(1.0, '#00ff00');
// Set the fill style and draw a rectangle // Set the fill style and draw a rectangle
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500); ctx.fillRect(0, 0, 500, 500);
...@@ -1708,24 +1751,23 @@ Creates a radial gradient and returns a **CanvasGradient** object. ...@@ -1708,24 +1751,23 @@ Creates a radial gradient and returns a **CanvasGradient** object.
createImageData(width: number, height: number, imageData: Object): Object createImageData(width: number, height: number, imageData: Object): Object
Creates an **ImageData** object. For details, see [ImageData](js-components-canvas-imagedata.md). Creates an **ImageData** object. For details, see [ImageData](../arkui-js/js-components-canvas-imagedata.md).
- Parameters
| Name | Type | Description | **Parameters**
| --------- | ------ | ------------------------------------------------------------ |
| width | number | Width of the **ImageData** object. |
| height | number | Height of the **ImageData** object. |
| imagedata | Object | **ImageData** object with the same width and height copied from the original **ImageData** object. |
- Return value | Name | Type | Description |
| --------- | ------ | ----------------- |
| width | number | Width of the **ImageData** object. |
| height | number | Height of the **ImageData** object. |
| imagedata | Object | **ImageData** object with the same width and height copied from the original **ImageData** object.|
| Type | Description | **Return value**
| ------ | ----------------------------- |
| Object | Created **ImageData** object. |
- Example | Type | Description |
| ------ | ----------------- |
| Object | Created **ImageData** object.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1749,29 +1791,28 @@ Creates an **ImageData** object. For details, see [ImageData](js-components-canv ...@@ -1749,29 +1791,28 @@ Creates an **ImageData** object. For details, see [ImageData](js-components-canv
getImageData(sx: number, sy: number, sw: number, sh: number): Object getImageData(sx: number, sy: number, sw: number, sh: number): Object
Creates an **ImageData** object with pixels in the specified area on the canvas. Obtains the **ImageData** object created with the pixels within the specified area on the canvas.
- Parameters
| Name | Type | Description | **Parameters**
| ---- | ------ | --------------------------------------------------------- |
| sx | number | X-coordinate of the upper left corner of the output area. |
| sy | number | Y-coordinate of the upper left corner of the output area. |
| sw | number | Width of the output area. |
| sh | number | Height of the output area. |
- Return value | Name | Type | Description |
| ---- | ------ | --------------- |
| sx | number | X-coordinate of the upper left corner of the output area.|
| sy | number | Y-coordinate of the upper left corner of the output area.|
| sw | number | Width of the output area. |
| sh | number | Height of the output area. |
| Type | Description | **Return value**
| ------ | ------------------------------------------------------------ |
| Object | **ImageData** object that contains pixels in the specified area on the canvas. |
- Example | Type | Description |
| ------ | ----------------------- |
| Object | **ImageData** object that contains pixels in the specified area on the canvas.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
...@@ -1792,24 +1833,23 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -1792,24 +1833,23 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
Puts the **ImageData** onto a rectangular area on the canvas. Puts the **ImageData** onto a rectangular area on the canvas.
- Parameters **Parameters**
| Name | Type | Description |
| ----------- | ------ | ------------------------------------------------------------ |
| imagedata | Object | **ImageData** object with pixels to put onto the canvas. |
| dx | number | X-axis offset of the rectangular area on the canvas. |
| dy | number | Y-axis offset of the rectangular area on the canvas. |
| dirtyX | number | X-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
| dirtyY | number | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image. |
| dirtyWidth | number | Width of the rectangular area to crop the source image. |
| dirtyHeight | number | Height of the rectangular area to crop the source image. |
- Example | Name | Type | Description |
| ----------- | ------ | ----------------------------- |
| imagedata | Object | **ImageData** object with pixels to put onto the canvas. |
| dx | number | X-axis offset of the rectangular area on the canvas. |
| dy | number | Y-axis offset of the rectangular area on the canvas. |
| dirtyX | number | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
| dirtyY | number | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
| dirtyWidth | number | Width of the rectangular area to crop the source image. |
| dirtyHeight | number | Height of the rectangular area to crop the source image. |
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
...@@ -1839,14 +1879,13 @@ setLineDash(segments: Array): void ...@@ -1839,14 +1879,13 @@ setLineDash(segments: Array): void
Sets the dash line style. Sets the dash line style.
- Parameters **Parameters**
| Name | Type | Description |
| -------- | ----- | ------------------------------------------------------------ |
| segments | Array | An array describing the interval of alternate line segments and length of spacing. |
- Example | Name | Type | Description |
| -------- | ----- | -------------------- |
| segments | Array | An array describing the interval of alternate line segments and length of spacing.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1875,14 +1914,13 @@ getLineDash(): Array ...@@ -1875,14 +1914,13 @@ getLineDash(): Array
Obtains the dash line style. Obtains the dash line style.
- Return value **Return value**
| Type | Description | | Type | Description |
| ----- | ------------------------------------------------------------ | | ----- | ------------------------ |
| Array | An array describing the interval of alternate line segments and length of spacing. | | Array | An array describing the interval of alternate line segments and length of spacing.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -1901,20 +1939,19 @@ Obtains the dash line style. ...@@ -1901,20 +1939,19 @@ Obtains the dash line style.
} }
``` ```
### transferFromImageBitmap7+ ### transferFromImageBitmap<sup>7+</sup>
transferFromImageBitmap(bitmap: ImageBitmap): void transferFromImageBitmap(bitmap: ImageBitmap): void
Displays the specified **ImageBitmap** object. Displays the specified **ImageBitmap** object.
- Parameters **Parameters**
| Name | Type | Description |
| ------ | ----------- | ---------------------------------- |
| bitmap | ImageBitmap | **ImageBitmap** object to display. |
- Example | Name | Type | Description |
| ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | **ImageBitmap** object to display.|
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
......
en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ 2f4dc689
# OffscreenCanvasRenderingContext2D # OffscreenCanvasRenderingContext2D
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>**OffscreenCanvasRenderingContext2D** is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**. Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**.
## Attributes ## Attributes
In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported. In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ | | ------ | ------ | ---------------------------------------- |
| filter | string | Image filter.<br>Available options are as follows:<br/> - **blur**: applies the Gaussian blur for the image.<br/> - **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br/> - **contrast**: adjusts the image contrast.<br/> - **drop-shadow**: sets a shadow effect for the image.<br/> - **grayscale**: converts the image to a grayscale image.<br/> - **hue-rotate**: applies hue rotation to the image.<br/> - **invert**: inverts the input image.<br/> - **opacity**: opacity of the converted image.<br/> - **saturate**: saturation of the converted image.<br/> - **sepia**: converts the image to dark brown. | | filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the image.<br>- **opacity**: sets the image opacity.<br>- **saturate**: sets the image saturation.<br>- **sepia**: converts the image to sepia.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 180px; height: 60px;"> <div style="width: 180px; height: 60px;">
...@@ -69,34 +69,30 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D* ...@@ -69,34 +69,30 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D*
} }
``` ```
## Methods ## Methods
In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported. In addition to the methods that are supported by **CanvasRenderingContext2D**, the following methods are supported.
### isPointInPath ### isPointInPath
isPointInPath\(path?: Path2D, x: number, y: number\): boolean isPointInPath(path?: Path2D, x: number, y: number): boolean
Checks whether a specified point is in the path area. Checks whether a specified point is in the path area.
- Parameters **Parameters**
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description | | ---- | ------ | ---- | ----------------------------- |
| ---- | ------ | --------- | ------------------------------------------------------------ | | path | Path2D | No | Path used for checking. If this parameter is not set, the current path is used.|
| path | Path2D | No | Path used for checking. If this parameter is not set, the current path is used. | | x | number | Yes | X-coordinate of the point used for checking. |
| x | number | Yes | X-coordinate of the point used for checking. | | y | number | Yes | Y-coordinate of the point used for checking. |
| y | number | Yes | Y-coordinate of the point used for checking. |
- Return values
| Type | Description | **Return value**
| ------- | ---------------------------------------------- | | Type | Description |
| boolean | Whether a specified point is in the path area. | | ------- | ------------- |
| boolean | Whether a specified point is in the path area.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 180px; height: 60px;"> <div style="width: 180px; height: 60px;">
...@@ -126,31 +122,27 @@ Checks whether a specified point is in the path area. ...@@ -126,31 +122,27 @@ Checks whether a specified point is in the path area.
} }
``` ```
![](figures/en-us_image_0000001224354967.png) ![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png)
### isPointInStroke ### isPointInStroke
isPointInStroke\(path?: Path2D, x: number, y: number\): boolean isPointInStroke(path?: Path2D, x: number, y: number): boolean
Checks whether a specified point is on the edge line of a path. Checks whether a specified point is on the edge line of a path.
- Parameters **Parameters**
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description | | ---- | ------ | ---- | ----------------------------- |
| ---- | ------ | --------- | ------------------------------------------------------------ | | path | Path2D | No | Path used for checking. If this parameter is not set, the current path is used.|
| path | Path2D | No | Path used for checking. If this parameter is not set, the current path is used. | | x | number | Yes | X-coordinate of the point used for checking. |
| x | number | Yes | X-coordinate of the point used for checking. | | y | number | Yes | Y-coordinate of the point used for checking. |
| y | number | Yes | Y-coordinate of the point used for checking. |
- Return values
| Type | Description | **Return value**
| ------- | ---------------------------------------------- | | Type | Description |
| boolean | Whether a specified point is in the path area. | | ------- | ------------- |
| boolean | Whether a specified point is in the path area.|
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 180px; height: 60px;"> <div style="width: 180px; height: 60px;">
...@@ -180,15 +172,13 @@ Checks whether a specified point is on the edge line of a path. ...@@ -180,15 +172,13 @@ Checks whether a specified point is on the edge line of a path.
} }
``` ```
![](figures/en-us_image_0000001178875308.png) ![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png)
### resetTransform ### resetTransform
resetTransform\(\): void resetTransform(): void
- Example
**Example**
``` ```
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="width: 180px; height: 60px;"> <div style="width: 180px; height: 60px;">
...@@ -209,13 +199,13 @@ resetTransform\(\): void ...@@ -209,13 +199,13 @@ resetTransform\(\): void
var offscreenCanvasCtx = offscreen.getContext("2d"); var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray'; offscreenCanvasCtx.fillStyle = '#a9a9a9';
offscreenCanvasCtx.fillRect(40, 40, 50, 20); offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20); offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles // Non-skewed rectangles
offscreenCanvasCtx.resetTransform(); offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red'; offscreenCanvasCtx.fillStyle = '#ff0000';
offscreenCanvasCtx.fillRect(40, 40, 50, 20); offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20); offscreenCanvasCtx.fillRect(40, 90, 50, 20);
...@@ -225,5 +215,4 @@ resetTransform\(\): void ...@@ -225,5 +215,4 @@ resetTransform\(\): void
} }
``` ```
![](figures/en-us_image_0000001179035242.png) ![en-us_image_0000001179035242](figures/en-us_image_0000001179035242.png)
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 2f4dc689
...@@ -428,7 +428,7 @@ struct LineDashOffset { ...@@ -428,7 +428,7 @@ struct LineDashOffset {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0 this.context.lineDashOffset = 10.0
this.context.stroke() this.context.stroke();
}) })
} }
.width('100%') .width('100%')
...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas. ...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -802,8 +802,6 @@ Draws filled text on the canvas. ...@@ -802,8 +802,6 @@ Draws filled text on the canvas.
| text | string | Yes | '' | Text to draw. | | text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
```ts ```ts
...@@ -1583,7 +1581,7 @@ struct Fill { ...@@ -1583,7 +1581,7 @@ struct Fill {
region.lineTo(270, 90) region.lineTo(270, 90)
region.closePath() region.closePath()
// Fill path // Fill path
this.context.fillStyle = 'green' this.context.fillStyle = '#00ff00'
this.context.fill(region, "evenodd") this.context.fill(region, "evenodd")
}) })
} }
...@@ -2269,7 +2267,7 @@ struct CanvasGetLineDash { ...@@ -2269,7 +2267,7 @@ struct CanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.stroke() this.context.stroke();
let res = this.context.getLineDash() let res = this.context.getLineDash()
}) })
} }
...@@ -2408,6 +2406,7 @@ Restores the saved drawing context. ...@@ -2408,6 +2406,7 @@ Restores the saved drawing context.
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2417,7 +2416,7 @@ Restores the saved drawing context. ...@@ -2417,7 +2416,7 @@ Restores the saved drawing context.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save() // save the default state this.context.save() // save the default state
this.context.fillStyle = "green" this.context.fillStyle = "#00ff00"
this.context.fillRect(20, 20, 100, 100) this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100) this.context.fillRect(150, 75, 100, 100)
...@@ -2455,7 +2454,7 @@ Saves all states of the canvas in the stack. This API is usually called when the ...@@ -2455,7 +2454,7 @@ Saves all states of the canvas in the stack. This API is usually called when the
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save() // save the default state this.context.save() // save the default state
this.context.fillStyle = "green" this.context.fillStyle = "#00ff00"
this.context.fillRect(20, 20, 100, 100) this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100) this.context.fillRect(150, 75, 100, 100)
...@@ -2502,9 +2501,9 @@ Creates a linear gradient. ...@@ -2502,9 +2501,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
...@@ -2553,9 +2552,9 @@ Creates a linear gradient. ...@@ -2553,9 +2552,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200) var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 2f4dc689
...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse ...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. | | color | string | Yes | '#ffffff' | Gradient color to set. |
**Example** **Example**
...@@ -41,9 +41,9 @@ struct Page45 { ...@@ -41,9 +41,9 @@ struct Page45 {
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() => { .onReady(() => {
var grad = this.context.createLinearGradient(50, 0, 300, 100) var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 2f4dc689
...@@ -182,7 +182,7 @@ struct LineCapExample { ...@@ -182,7 +182,7 @@ struct LineCapExample {
} }
``` ```
![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG) ![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.png)
### lineJoin ### lineJoin
...@@ -2625,9 +2625,9 @@ Creates a linear gradient. ...@@ -2625,9 +2625,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100) var grad = this.offContext.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
...@@ -2679,9 +2679,9 @@ Creates a linear gradient. ...@@ -2679,9 +2679,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
grad.addColorStop(0.0, 'red') grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, 'white') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, 'green') grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或