@@ -1901,20 +1939,19 @@ Obtains the dash line style.
}
```
-### transferFromImageBitmap7+
+### transferFromImageBitmap
transferFromImageBitmap(bitmap: ImageBitmap): void
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**
```
@@ -1932,11 +1969,11 @@ Displays the specified **ImageBitmap** object.
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.fillRect(0, 0, 200, 200);
-
+
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
- 
\ No newline at end of file
+ 
diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index 1ca6d51ef332ae367846b5eec73121814ae5398d..5cf4219ddc9e2b94cf19e0170f7056ac2af76032 100644
--- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -1,229 +1,218 @@
# 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.
-> **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
-In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
-
-| Name | Type | Description |
-| ------ | ------ | ------------------------------------------------------------ |
-| filter | string | Image filter.
Available options are as follows:
- **blur**: applies the Gaussian blur for the image.
- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.
- **contrast**: adjusts the image contrast.
- **drop-shadow**: sets a shadow effect for the image.
- **grayscale**: converts the image to a grayscale image.
- **hue-rotate**: applies hue rotation to the image.
- **invert**: inverts the input image.
- **opacity**: opacity of the converted image.
- **saturate**: saturation of the converted image.
- **sepia**: converts the image to dark brown. |
-
-
-- Example
-
- ```
-
-
-
-
- ```
-
- ```
- //xxx.js
- export default {
- onShow(){
- var ctx = this.$refs.canvasId.getContext('2d');
- var offscreen = new OffscreenCanvas(360, 500);
- var offCanvas2 = offscreen.getContext("2d");
- var img = new Image();
- img.src = 'common/images/flower.jpg';
- offCanvas2.drawImage(img, 0, 0, 100, 100);
- offCanvas2.filter = 'blur(5px)';
- offCanvas2.drawImage(img, 100, 0, 100, 100);
-
- offCanvas2.filter = 'grayscale(50%)';
- offCanvas2.drawImage(img, 200, 0, 100, 100);
-
- offCanvas2.filter = 'hue-rotate(90deg)';
- offCanvas2.drawImage(img, 0, 100, 100, 100);
-
- offCanvas2.filter = 'invert(100%)';
- offCanvas2.drawImage(img, 100, 100, 100, 100);
-
- offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
- offCanvas2.drawImage(img, 200, 100, 100, 100);
-
- offCanvas2.filter = 'brightness(0.4)';
- offCanvas2.drawImage(img, 0, 200, 100, 100);
-
- offCanvas2.filter = 'opacity(25%)';
- offCanvas2.drawImage(img, 100, 200, 100, 100);
-
- offCanvas2.filter = 'saturate(30%)';
- offCanvas2.drawImage(img, 200, 200, 100, 100);
-
- offCanvas2.filter = 'sepia(60%)';
- offCanvas2.drawImage(img, 0, 300, 100, 100);
-
- offCanvas2.filter = 'contrast(200%)';
- offCanvas2.drawImage(img, 100, 300, 100, 100);
- var bitmap = offscreen.transferToImageBitmap();
- ctx.transferFromImageBitmap(bitmap);
- }
+In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
+
+| Name | Type | Description |
+| ------ | ------ | ---------------------------------------- |
+| filter | string | Image filter.
Available options are as follows:
- **blur**: applies the Gaussian blur for the image.
- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.
- **contrast**: adjusts the image contrast.
- **drop-shadow**: sets a shadow effect for the image.
- **grayscale**: converts the image to a grayscale image.
- **hue-rotate**: applies hue rotation to the image.
- **invert**: inverts the image.
- **opacity**: sets the image opacity.
- **saturate**: sets the image saturation.
- **sepia**: converts the image to sepia.|
+
+**Example**
+ ```
+
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow(){
+ var ctx = this.$refs.canvasId.getContext('2d');
+ var offscreen = new OffscreenCanvas(360, 500);
+ var offCanvas2 = offscreen.getContext("2d");
+ var img = new Image();
+ img.src = 'common/images/flower.jpg';
+ offCanvas2.drawImage(img, 0, 0, 100, 100);
+ offCanvas2.filter = 'blur(5px)';
+ offCanvas2.drawImage(img, 100, 0, 100, 100);
+
+ offCanvas2.filter = 'grayscale(50%)';
+ offCanvas2.drawImage(img, 200, 0, 100, 100);
+
+ offCanvas2.filter = 'hue-rotate(90deg)';
+ offCanvas2.drawImage(img, 0, 100, 100, 100);
+
+ offCanvas2.filter = 'invert(100%)';
+ offCanvas2.drawImage(img, 100, 100, 100, 100);
+
+ offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
+ offCanvas2.drawImage(img, 200, 100, 100, 100);
+
+ offCanvas2.filter = 'brightness(0.4)';
+ offCanvas2.drawImage(img, 0, 200, 100, 100);
+
+ offCanvas2.filter = 'opacity(25%)';
+ offCanvas2.drawImage(img, 100, 200, 100, 100);
+
+ offCanvas2.filter = 'saturate(30%)';
+ offCanvas2.drawImage(img, 200, 200, 100, 100);
+
+ offCanvas2.filter = 'sepia(60%)';
+ offCanvas2.drawImage(img, 0, 300, 100, 100);
+
+ offCanvas2.filter = 'contrast(200%)';
+ offCanvas2.drawImage(img, 100, 300, 100, 100);
+ var bitmap = offscreen.transferToImageBitmap();
+ ctx.transferFromImageBitmap(bitmap);
}
- ```
-
-
+ }
+ ```
## 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\(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.
-- Parameters
-
- | Name | Type | Mandatory | Description |
- | ---- | ------ | --------- | ------------------------------------------------------------ |
- | 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. |
- | y | number | Yes | Y-coordinate of the point used for checking. |
-
-- Return values
-
- | Type | Description |
- | ------- | ---------------------------------------------- |
- | boolean | Whether a specified point is in the path area. |
-
-- Example
-
- ```
-
-
- In path:{{textValue}}
-
-
- ```
-
- ```
- // xxx.js
- export default {
- data: {
- textValue: 0
- },
- onShow(){
- var canvas = this.$refs.canvas.getContext('2d');
- var offscreen = new OffscreenCanvas(500,500);
- var offscreenCanvasCtx = offscreen.getContext("2d");
-
- offscreenCanvasCtx.rect(10, 10, 100, 100);
- offscreenCanvasCtx.fill();
- this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
-
- var bitmap = offscreen.transferToImageBitmap();
- canvas.transferFromImageBitmap(bitmap);
- }
+**Parameters**
+| Name | Type | Mandatory | Description |
+| ---- | ------ | ---- | ----------------------------- |
+| 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. |
+| y | number | Yes | Y-coordinate of the point used for checking. |
+
+**Return value**
+| Type | Description |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
+
+**Example**
+ ```
+
+
+ In path:{{textValue}}
+
+
+ ```
+
+ ```
+ // xxx.js
+ export default {
+ data: {
+ textValue: 0
+ },
+ onShow(){
+ var canvas = this.$refs.canvas.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.rect(10, 10, 100, 100);
+ offscreenCanvasCtx.fill();
+ this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
}
- ```
-
- 
+ }
+ ```
+
### 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.
-- Parameters
-
- | Name | Type | Mandatory | Description |
- | ---- | ------ | --------- | ------------------------------------------------------------ |
- | 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. |
- | y | number | Yes | Y-coordinate of the point used for checking. |
-
-- Return values
-
- | Type | Description |
- | ------- | ---------------------------------------------- |
- | boolean | Whether a specified point is in the path area. |
-
-- Example
-
- ```
-
-
- In path:{{textValue}}
-
-
- ```
-
- ```
- // xxx.js
- export default {
- data: {
- textValue: 0
- },
- onShow(){
- var canvas = this.$refs.canvas.getContext('2d');
- var offscreen = new OffscreenCanvas(500,500);
- var offscreenCanvasCtx = offscreen.getContext("2d");
-
- offscreenCanvasCtx.rect(10, 10, 100, 100);
- offscreenCanvasCtx.stroke();
- this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
-
- var bitmap = offscreen.transferToImageBitmap();
- canvas.transferFromImageBitmap(bitmap);
- }
+**Parameters**
+| Name | Type | Mandatory | Description |
+| ---- | ------ | ---- | ----------------------------- |
+| 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. |
+| y | number | Yes | Y-coordinate of the point used for checking. |
+
+**Return value**
+| Type | Description |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
+
+**Example**
+ ```
+
+
+ In path:{{textValue}}
+
+
+ ```
+
+ ```
+ // xxx.js
+ export default {
+ data: {
+ textValue: 0
+ },
+ onShow(){
+ var canvas = this.$refs.canvas.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.rect(10, 10, 100, 100);
+ offscreenCanvasCtx.stroke();
+ this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
}
- ```
-
- 
+ }
+ ```
+
### resetTransform
-resetTransform\(\): void
-
-- Example
-
- ```
-
-
- In path:{{textValue}}
-
-
- ```
-
- ```
- //xxx.js
- export default {
- data:{
- textValue:0
- },
- onShow(){
- var canvas = this.$refs.canvas.getContext('2d');
- var offscreen = new OffscreenCanvas(500,500);
- var offscreenCanvasCtx = offscreen.getContext("2d");
-
- offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
- offscreenCanvasCtx.fillStyle = 'gray';
- offscreenCanvasCtx.fillRect(40, 40, 50, 20);
- offscreenCanvasCtx.fillRect(40, 90, 50, 20);
-
- // Non-skewed rectangles
- offscreenCanvasCtx.resetTransform();
- offscreenCanvasCtx.fillStyle = 'red';
- offscreenCanvasCtx.fillRect(40, 40, 50, 20);
- offscreenCanvasCtx.fillRect(40, 90, 50, 20);
-
- var bitmap = offscreen.transferToImageBitmap();
- canvas.transferFromImageBitmap(bitmap);
- }
- }
- ```
-
- 
-
+resetTransform(): void
+
+**Example**
+ ```
+
+
+ In path:{{textValue}}
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ data:{
+ textValue:0
+ },
+ onShow(){
+ var canvas = this.$refs.canvas.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
+ offscreenCanvasCtx.fillStyle = '#a9a9a9';
+ offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+ offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+
+ // Non-skewed rectangles
+ offscreenCanvasCtx.resetTransform();
+ offscreenCanvasCtx.fillStyle = '#ff0000';
+ offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+ offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ }
+ }
+ ```
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 1e0ce0647f6067d5396e131e6bcc7ac75bc6a718..19d0aac5c5096003b9533bd4af274ab66d6bcdc7 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -428,7 +428,7 @@ struct LineDashOffset {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0
- this.context.stroke()
+ this.context.stroke();
})
}
.width('100%')
@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
@Entry
@Component
struct StrokeRect {
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private settings: RenderingContextSettings = new RenderingContextSettings(true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -802,8 +802,6 @@ Draws filled text on the canvas.
| text | string | Yes | '' | Text to draw. |
| 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.|
-| maxWidth | number | No | - | Maximum width allowed for the text. |
-
**Example**
```ts
@@ -1583,7 +1581,7 @@ struct Fill {
region.lineTo(270, 90)
region.closePath()
// Fill path
- this.context.fillStyle = 'green'
+ this.context.fillStyle = '#00ff00'
this.context.fill(region, "evenodd")
})
}
@@ -2269,7 +2267,7 @@ struct CanvasGetLineDash {
.onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
- this.context.stroke()
+ this.context.stroke();
let res = this.context.getLineDash()
})
}
@@ -2408,7 +2406,8 @@ Restores the saved drawing context.
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+ private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -2417,7 +2416,7 @@ Restores the saved drawing context.
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save() // save the default state
- this.context.fillStyle = "green"
+ this.context.fillStyle = "#00ff00"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
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
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save() // save the default state
- this.context.fillStyle = "green"
+ this.context.fillStyle = "#00ff00"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100)
@@ -2502,9 +2501,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
- grad.addColorStop(0.0, 'red')
- grad.addColorStop(0.5, 'white')
- grad.addColorStop(1.0, 'green')
+ grad.addColorStop(0.0, '#ff0000')
+ grad.addColorStop(0.5, '#ffffff')
+ grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
@@ -2553,9 +2552,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
- grad.addColorStop(0.0, 'red')
- grad.addColorStop(0.5, 'white')
- grad.addColorStop(1.0, 'green')
+ grad.addColorStop(0.0, '#ff0000')
+ grad.addColorStop(0.5, '#ffffff')
+ grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 4ed45d0084a9d456f6fa715775d001b1e054808b..7c8b95655a9470ea7fd1951132f7b2c7974a45da 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters**
- | 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.|
- | color | string | Yes | '#ffffff' | Gradient color to set. |
+| 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.|
+| color | string | Yes | '#ffffff' | Gradient color to set. |
**Example**
@@ -41,9 +41,9 @@ struct Page45 {
.backgroundColor('#ffff00')
.onReady(() => {
var grad = this.context.createLinearGradient(50, 0, 300, 100)
- grad.addColorStop(0.0, 'red')
- grad.addColorStop(0.5, 'white')
- grad.addColorStop(1.0, 'green')
+ grad.addColorStop(0.0, '#ff0000')
+ grad.addColorStop(0.5, '#ffffff')
+ grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index abfbce542354cce435a5e611f13f8bc73b28e64f..9f04894b549d772d71561ed46d46c094dc839a60 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -182,7 +182,7 @@ struct LineCapExample {
}
```
-
+
### lineJoin
@@ -2625,9 +2625,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100)
- grad.addColorStop(0.0, 'red')
- grad.addColorStop(0.5, 'white')
- grad.addColorStop(1.0, 'green')
+ grad.addColorStop(0.0, '#ff0000')
+ grad.addColorStop(0.5, '#ffffff')
+ grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap()
@@ -2679,9 +2679,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
- grad.addColorStop(0.0, 'red')
- grad.addColorStop(0.5, 'white')
- grad.addColorStop(1.0, 'green')
+ grad.addColorStop(0.0, '#ff0000')
+ grad.addColorStop(0.5, '#ffffff')
+ grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap()