From 588a87ab048a10d9fdc2deef212c63cfca7791f2 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Wed, 16 Feb 2022 19:30:30 +0800 Subject: [PATCH] update docs Signed-off-by: ester.zhou --- .../arkui-ts/ts-canvasrenderingcontext2d.md | 148 ++++++++---------- .../arkui-ts/ts-components-canvas-canvas.md | 2 +- .../ts-components-canvas-canvasgradient.md | 9 +- .../ts-components-canvas-imagebitmap.md | 2 +- .../arkui-ts/ts-components-canvas-path2d.md | 25 ++- .../ts-offscreencanvasrenderingcontext2d.md | 130 ++++++++------- 6 files changed, 150 insertions(+), 166 deletions(-) diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 866df9034f..542885a1c1 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -7,7 +7,7 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects o ## APIs -CanvasRenderingContext2D\(setting: RenderingContextSetting\) +CanvasRenderingContext2D\(setting: RenderingContextSettings\) - Parameters @@ -41,9 +41,9 @@ CanvasRenderingContext2D\(setting: RenderingContextSetting\) ### RenderingContextSettings -RenderingContextSettings\(antialias?: bool, alpha?: bool\) +RenderingContextSettings\(antialias?: bool\) -Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing and whether to contain an alpha channel. +Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing. - Parameters @@ -71,17 +71,6 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh

Whether antialiasing is enabled.

-

alpha

- -

bool

- -

No

- -

false

- -

Whether the canvas contains an alpha channel.

- - @@ -285,7 +274,7 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh @Entry @Component struct FillStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -313,7 +302,7 @@ struct FillStyleExample { @Entry @Component struct LineWidthExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -341,7 +330,7 @@ struct LineWidthExample { @Entry @Component struct StrokeStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -370,7 +359,7 @@ struct StrokeStyleExample { @Entry @Component struct LineCapExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -402,7 +391,7 @@ struct LineCapExample { @Entry @Component struct LineJoinExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -435,7 +424,7 @@ struct LineJoinExample { @Entry @Component struct MiterLimit { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -468,7 +457,7 @@ struct MiterLimit { @Entry @Component struct Font { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -495,8 +484,8 @@ struct Font { ``` @Entry @Component -struct TextAlign { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) +struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -539,7 +528,7 @@ struct TextAlign { @Entry @Component struct TextBaseline { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -582,7 +571,7 @@ struct TextBaseline { @Entry @Component struct GlobalAlpha { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -613,7 +602,7 @@ struct GlobalAlpha { @Entry @Component struct LineDashOffset { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -707,7 +696,7 @@ struct LineDashOffset { @Entry @Component struct GlobalCompositeOperation { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -743,7 +732,7 @@ struct GlobalCompositeOperation { @Entry @Component struct ShadowBlur { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { @@ -773,7 +762,7 @@ struct ShadowBlur { @Entry @Component struct ShadowColor { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -803,7 +792,7 @@ struct ShadowColor { @Entry @Component struct ShadowOffsetX { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -834,7 +823,7 @@ struct ShadowOffsetX { @Entry @Component struct ShadowOffsetY { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -864,7 +853,7 @@ struct ShadowOffsetY { @Entry @Component struct ImageSmoothingEnabled { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") @@ -964,7 +953,7 @@ Fills a rectangle on the canvas. @Entry @Component struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1061,7 +1050,7 @@ Draws a rectangle stroke on the canvas. @Entry @Component struct StrokeRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1157,7 +1146,7 @@ Clears the content in a rectangle on the canvas. @Entry @Component struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1244,7 +1233,7 @@ Draws filled text on the canvas. @Entry @Component struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1330,7 +1319,7 @@ Draws a text stroke on the canvas. @Entry @Component struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1433,7 +1422,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. @Entry @Component struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1497,8 +1486,8 @@ Strokes a path. ``` @Entry @Component - struct Stroke { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1535,7 +1524,7 @@ Creates a drawing path. @Entry @Component struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1615,7 +1604,7 @@ Moves a drawing path to a target position on the canvas. @Entry @Component struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1693,7 +1682,7 @@ Connects the current point to a target position using a straight line. @Entry @Component struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1730,7 +1719,7 @@ Draws a closed path. @Entry @Component struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -1809,7 +1798,7 @@ Creates a pattern for image filling based on a specified source image and repeti @Entry @Component struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") @@ -1931,7 +1920,7 @@ Draws a cubic bezier curve on the canvas. @Entry @Component struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2031,7 +2020,7 @@ Draws a quadratic curve on the canvas. @Entry @Component struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2152,7 +2141,7 @@ Draws an arc on the canvas. @Entry @Component struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2262,7 +2251,7 @@ Draws an arc based on the radius and points on the arc. @Entry @Component struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2405,7 +2394,7 @@ Draws an ellipse in the specified rectangular region. @Entry @Component struct Ellipse { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2507,8 +2496,8 @@ Creates a rectangle. ``` @Entry @Component - struct Rect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2543,7 +2532,7 @@ Fills the area inside a closed path. @Entry @Component struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2578,7 +2567,7 @@ Sets the current path to a clipping path. @Entry @Component struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2650,7 +2639,7 @@ Rotates a canvas clockwise around its coordinate axes. @Entry @Component struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2726,7 +2715,7 @@ Scales a canvas based on scaling factors. @Entry @Component struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -2851,7 +2840,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para @Entry @Component struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2975,7 +2964,7 @@ Resets the existing transformation matrix and creates a new transformation matri @Entry @Component struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -3053,7 +3042,7 @@ Moves the origin of the coordinate system. @Entry @Component struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -3211,7 +3200,7 @@ Draws an image. @Entry @Component struct ImageExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); build() { @@ -3492,7 +3481,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are @Entry @Component struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -3532,8 +3521,8 @@ Restores the saved drawing context. ``` @Entry @Component - struct Restore { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -3543,7 +3532,7 @@ Restores the saved drawing context. .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ - this.controller.restore() + this.context.restore() }) } .width('100%') @@ -3564,8 +3553,8 @@ Saves the current drawing context. ``` @Entry @Component - struct Restore { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { @@ -3659,9 +3648,8 @@ Creates a linear gradient. @Entry @Component struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private gra:CanvasGradient = new CanvasGradient() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -3671,9 +3659,9 @@ Creates a linear gradient. .backgroundColor('#ffff00') .onReady(() =>{ var grad = this.context.createLinearGradient(50,0, 300,100) - this.gra.addColorStop(0.0, 'red') - this.gra.addColorStop(0.5, 'white') - this.gra.addColorStop(1.0, 'green') + gra.addColorStop(0.0, 'red') + gra.addColorStop(0.5, 'white') + gra.addColorStop(1.0, 'green') this.context.fillStyle = grad this.context.fillRect(0, 0, 500, 500) }) @@ -3683,8 +3671,9 @@ Creates a linear gradient. } } ``` + - ![](figures/en-us_image_0000001237555149.png) +![](figures/en-us_image_0000001237555149.png) ### createRadialGradient @@ -3783,10 +3772,9 @@ Creates a linear gradient. @Entry @Component struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private gra:CanvasGradient = new CanvasGradient() - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -3795,9 +3783,9 @@ Creates a linear gradient. .backgroundColor('#ffff00') .onReady(() =>{ var grad = this.context.createRadialGradient(200,200,50, 200,200,200) - this.gra.addColorStop(0.0, 'red') - this.gra.addColorStop(0.5, 'white') - this.gra.addColorStop(1.0, 'green') + gra.addColorStop(0.0, 'red') + gra.addColorStop(0.5, 'white') + gra.addColorStop(1.0, 'green') this.context.fillStyle = grad this.context.fillRect(0, 0, 500, 500) }) @@ -3807,8 +3795,8 @@ Creates a linear gradient. } } ``` - - ![](figures/en-us_image_0000001192755188.png) + +![](figures/en-us_image_0000001192755188.png) ## CanvasPattern diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 2a193c594a..f34c7ce4e1 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -80,7 +80,7 @@ In addition to [universal events](ts-universal-events-click.md), the following @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { 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 2e1895ded8..b601e5821a 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 @@ -57,7 +57,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified off @Entry @Component struct Page45 { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private gra:CanvasGradient = new CanvasGradient() @@ -69,9 +69,9 @@ Adds a color stop for the **CanvasGradient** object based on the specified off .backgroundColor('#ffff00') .onReady(() =>{ var grad = this.context.createLinearGradient(50,0, 300,100) - this.gra.addColorStop(0.0, 'red') - this.gra.addColorStop(0.5, 'white') - this.gra.addColorStop(1.0, 'green') + gra.addColorStop(0.0, 'red') + gra.addColorStop(0.5, 'white') + gra.addColorStop(1.0, 'green') this.context.fillStyle = grad this.context.fillRect(0, 0, 500, 500) }) @@ -84,4 +84,3 @@ Adds a color stop for the **CanvasGradient** object based on the specified off ![](figures/en-us_image_0000001192915130.png) - diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 6c7546ec9f..ad48b3ddbe 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -85,7 +85,7 @@ Example @Entry @Component struct DrawImageExample { - private settings:RenderingContextSettings = new RenderingContextSettings(true,true) + private settings:RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 3cf2b4df5c..d86cfb3078 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -46,7 +46,7 @@ Adds a path to this path. @Entry @Component struct AddPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") @@ -84,7 +84,7 @@ Moves the current point of the path back to the start point of the path, and dra @Entry @Component struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -163,7 +163,7 @@ Moves the current coordinate point of the path to the target point, without draw @Entry @Component struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -242,7 +242,7 @@ Draws a straight line from the current point to the target point. @Entry @Component struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -367,7 +367,7 @@ Draws a cubic bezier curve on the canvas. @Entry @Component struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -465,7 +465,7 @@ Draws a quadratic curve on the canvas. @Entry @Component struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -586,7 +586,7 @@ Draws an arc on the canvas. @Entry @Component struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -694,7 +694,7 @@ Draws an arc based on the radius and points on the arc. @Entry @Component struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -835,8 +835,8 @@ Draws an ellipse in the specified rectangular region. ``` @Entry @Component - struct Ellipse { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -933,8 +933,8 @@ Creates a rectangle. ``` @Entry @Component - struct Rect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() @@ -956,4 +956,3 @@ Creates a rectangle. ![](figures/en-us_image_0000001192755174.png) - diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 4c985bdfc4..440b12f304 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -260,7 +260,7 @@ OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: Rende @Entry @Component struct FillStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -291,7 +291,7 @@ struct FillStyleExample { @Entry @Component struct LineWidthExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -322,7 +322,7 @@ struct LineWidthExample { @Entry @Component struct StrokeStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -354,7 +354,7 @@ struct StrokeStyleExample { @Entry @Component struct LineCapExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -389,7 +389,7 @@ struct LineCapExample { @Entry @Component struct LineJoinExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -425,7 +425,7 @@ struct LineJoinExample { @Entry @Component struct MiterLimit { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -461,7 +461,7 @@ struct MiterLimit { @Entry @Component struct Font { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -491,8 +491,8 @@ struct Font { ``` @Entry @Component -struct TextAlign { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) +struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -538,7 +538,7 @@ struct TextAlign { @Entry @Component struct TextBaseline { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -584,7 +584,7 @@ struct TextBaseline { @Entry @Component struct GlobalAlpha { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -618,7 +618,7 @@ struct GlobalAlpha { @Entry @Component struct LineDashOffset { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -715,7 +715,7 @@ struct LineDashOffset { @Entry @Component struct GlobalCompositeOperation { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -754,7 +754,7 @@ struct GlobalCompositeOperation { @Entry @Component struct ShadowBlur { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -787,7 +787,7 @@ struct ShadowBlur { @Entry @Component struct ShadowColor { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -821,7 +821,7 @@ struct ShadowColor { @Entry @Component struct ShadowOffsetX { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -855,7 +855,7 @@ struct ShadowOffsetX { @Entry @Component struct ShadowOffsetY { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -889,7 +889,7 @@ struct ShadowOffsetY { @Entry @Component struct ImageSmoothingEnabled { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -991,7 +991,7 @@ Fills a rectangle on the canvas. @Entry @Component struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -1091,7 +1091,7 @@ Draws a rectangle stroke on the canvas. @Entry @Component struct StrokeRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1190,7 +1190,7 @@ Clears the content in a rectangle on the canvas. @Entry @Component struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1280,7 +1280,7 @@ Draws filled text on the canvas. @Entry @Component struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1369,7 +1369,7 @@ Draws a text stroke on the canvas. @Entry @Component struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1474,7 +1474,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. @Entry @Component struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1541,10 +1541,10 @@ Strokes a path. ``` @Entry @Component - struct Stroke { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenRenderingContext(600, 600, this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1581,7 +1581,7 @@ Creates a drawing path. @Entry @Component struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1663,7 +1663,7 @@ Moves a drawing path to a target position on the canvas. @Entry @Component struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1743,7 +1743,7 @@ Connects the current point to a target position using a straight line. @Entry @Component struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1782,7 +1782,7 @@ Draws a closed path. @Entry @Component struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -1863,7 +1863,7 @@ Creates a pattern for image filling based on a specified source image and repeti @Entry @Component struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -1987,7 +1987,7 @@ Draws a cubic bezier curve on the canvas. @Entry @Component struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2089,7 +2089,7 @@ Draws a quadratic curve on the canvas. @Entry @Component struct QuadraticCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2212,7 +2212,7 @@ Draws an arc on the canvas. @Entry @Component struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2324,7 +2324,7 @@ Draws an arc based on the radius and points on the arc. @Entry @Component struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2468,8 +2468,8 @@ Draws an ellipse in the specified rectangular region. ``` @Entry @Component - struct Ellipse { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2569,8 +2569,8 @@ Creates a rectangle. ``` @Entry @Component - struct Rect { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2607,7 +2607,7 @@ Fills the area inside a closed path. @Entry @Component struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2644,7 +2644,7 @@ Sets the current path to a clipping path. @Entry @Component struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2714,7 +2714,7 @@ Rotates a canvas clockwise around its coordinate axes. @Entry @Component struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2792,7 +2792,7 @@ Scales a canvas based on scaling factors. @Entry @Component struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -2919,7 +2919,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para @Entry @Component struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3046,7 +3046,7 @@ Resets the existing transformation matrix and creates a new transformation matri @Entry @Component struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3126,7 +3126,7 @@ Moves the origin of the coordinate system. @Entry @Component struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3286,7 +3286,7 @@ Draws an image. @Entry @Component struct Index { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -3570,7 +3570,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are @Entry @Component struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3612,8 +3612,8 @@ Restores the saved drawing context. ``` @Entry @Component - struct Restore { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3647,7 +3647,7 @@ Saves the current drawing context. @Entry @Component struct Restore { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { @@ -3743,9 +3743,8 @@ Creates a linear gradient. @Entry @Component struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private gra:CanvasGradient = new CanvasGradient() private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -3755,9 +3754,9 @@ Creates a linear gradient. .backgroundColor('#ffff00') .onReady(() =>{ var grad = this.offContext.createLinearGradient(50,0, 300,100) - this.gra.addColorStop(0.0, 'red') - this.gra.addColorStop(0.5, 'white') - this.gra.addColorStop(1.0, 'green') + gra.addColorStop(0.0, 'red') + gra.addColorStop(0.5, 'white') + gra.addColorStop(1.0, 'green') this.offContext.fillStyle = grad this.offContext.fillRect(0, 0, 500, 500) var image = this.offContext.transferToImageBitmap() @@ -3769,8 +3768,8 @@ Creates a linear gradient. } } ``` - - ![](figures/en-us_image_0000001192915162.png) + +![](figures/en-us_image_0000001192915162.png) ### createRadialGradient @@ -3869,9 +3868,8 @@ Creates a linear gradient. @Entry @Component struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private gra:CanvasGradient = new CanvasGradient() private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -3881,9 +3879,9 @@ Creates a linear gradient. .backgroundColor('#ffff00') .onReady(() =>{ var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) - this.gra.addColorStop(0.0, 'red') - this.gra.addColorStop(0.5, 'white') - this.gra.addColorStop(1.0, 'green') + gra.addColorStop(0.0, 'red') + gra.addColorStop(0.5, 'white') + gra.addColorStop(1.0, 'green') this.offContext.fillStyle = grad this.offContext.fillRect(0, 0, 500, 500) var image = this.offContext.transferToImageBitmap() @@ -3895,8 +3893,8 @@ Creates a linear gradient. } } ``` - - ![](figures/en-us_image_0000001237555179.png) + +![](figures/en-us_image_0000001237555179.png) ## CanvasPattern -- GitLab