diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png index b2728fd1b4e050edddf499398b44a7e3aa634109..f1b942fee8437b1197ef3e9f40c98187a76f8c44 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194352434.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png index b2728fd1b4e050edddf499398b44a7e3aa634109..f1b942fee8437b1197ef3e9f40c98187a76f8c44 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238712439.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777771.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777771.png new file mode 100644 index 0000000000000000000000000000000000000000..06cbacf1470de12c79c2020aa8c6be95506e58b5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777771.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777772.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777772.png new file mode 100644 index 0000000000000000000000000000000000000000..9c68b723dd3966886d384028663d4a7d6633c027 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777772.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777773.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777773.png new file mode 100644 index 0000000000000000000000000000000000000000..7dbcbb2d5710b17866b9d5b034437b91a700a3f9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777773.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777774.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777774.png new file mode 100644 index 0000000000000000000000000000000000000000..60f430b646b45a3e3b16a9bb024e4a14e48bf4d3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777774.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777775.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777775.png new file mode 100644 index 0000000000000000000000000000000000000000..60f430b646b45a3e3b16a9bb024e4a14e48bf4d3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_000000127777775.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index a7c3dfcdc1f3cc8fc46e86a18b624e8dd66e2e19..152ff182e77fc382f99a785de5ad2aa95194deb9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -11,7 +11,8 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) -- 参数 +**参数：** + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | @@ -23,7 +24,8 @@ RenderingContextSettings(antialias?: boolean) 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 -- 参数 +**参数：** + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | --------- | ------- | ---- | ----- | ---------------- | | antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | @@ -31,29 +33,28 @@ RenderingContextSettings(antialias?: boolean) ## 属性 -| 名称 | 类型 | 默认值 | 描述 | -| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | -| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | -| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | -| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | -| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | -| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | -| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | -| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | -| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | -| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | -| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | -| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | -| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | -| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | -| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | +| 名称 | 类型 | 描述 | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 设置描边的颜色。
- 类型为string时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
默认值：'butt'。 | +| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
默认值：'miter'。 | +| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
默认值：10。 | +| [font](#font) | string | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
默认值：'normal normal 14px sans-serif'。 | +| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。 | +| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
默认值：'alphabetic'。 | +| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。
默认值：0.0。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。
默认值：'source-over'。 | +| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。
默认值：0.0。 | +| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 +>fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 ### fillStyle @@ -424,6 +425,7 @@ struct LineDashOffset { .onReady(() =>{ this.context.arc(100, 75, 50, 0, 6.28) this.context.setLineDash([10,20]) + this.context.lineDashOffset = 10.0; this.context.stroke(); }) } @@ -594,6 +596,7 @@ struct ShadowOffsetX { struct ShadowOffsetY { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -657,7 +660,8 @@ fillRect(x: number, y: number, w: number, h: number): void 填充一个矩形。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | @@ -665,7 +669,8 @@ fillRect(x: number, y: number, w: number, h: number): void | width | number | 是 | 0 | 指定矩形的宽度。 | | height | number | 是 | 0 | 指定矩形的高度。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -699,15 +704,17 @@ strokeRect(x: number, y: number, w: number, h: number): void 绘制具有边框的矩形，矩形内部不填充。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------ | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | w | number | 是 | 0 | 指定矩形的宽度。 | + | h | number | 是 | 0 | 指定矩形的高度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -715,6 +722,7 @@ strokeRect(x: number, y: number, w: number, h: number): void struct StrokeRect { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -740,15 +748,17 @@ clearRect(x: number, y: number, w: number, h: number): void 删除指定区域内的绘制内容。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | w | number | 是 | 0 | 指定矩形的宽度。 | + | h | number | 是 | 0 | 指定矩形的高度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -756,6 +766,7 @@ clearRect(x: number, y: number, w: number, h: number): void struct ClearRect { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -779,18 +790,21 @@ clearRect(x: number, y: number, w: number, h: number): void ### fillText -fillText(text: string, x: number, y: number): void +fillText(text: string, x: number, y: number, maxWidth?: number): void 绘制填充类文本。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | --------------- | | text | string | 是 | “” | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -798,6 +812,7 @@ fillText(text: string, x: number, y: number): void struct FillText { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -820,18 +835,21 @@ fillText(text: string, x: number, y: number): void ### strokeText -strokeText(text: string, x: number, y: number): void +strokeText(text: string, x: number, y: number, maxWidth?:number): void 绘制描边类文本。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------------- | | text | string | 是 | “” | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -839,6 +857,7 @@ strokeText(text: string, x: number, y: number): void struct StrokeText { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -865,22 +884,41 @@ measureText(text: string): TextMetrics 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | ---------- | | text | string | 是 | "" | 需要进行测量的文本。 | -- 返回值 +**返回值：** + | 类型 | 说明 | | ----------- | ------- | | TextMetrics | 文本的尺寸信息 | -- TextMetrics类型描述 - | 属性 | 类型 | 描述 | - | ----- | ------ | ------- | - | width | number | 字符串的宽度。 | +**TextMetrics类型描述:** + + | 属性 | 类型 | 描述 | + | ----- | ------ | ------- | + | width | number | 字符串的宽度。 | + | height | number | 字符串的高度。 | + | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | + | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | + | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | + | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| + | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| + | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| + | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| + | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| + | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| + | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| + | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| + + + + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -888,6 +926,7 @@ measureText(text: string): TextMetrics struct MeasureText { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -915,12 +954,14 @@ stroke(path?: Path2D): void 进行边框绘制操作。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ---------------------------------------- | ---- | ---- | ------------ | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -928,7 +969,7 @@ stroke(path?: Path2D): void struct Stroke { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -957,7 +998,8 @@ beginPath(): void 创建一个新的绘制路径。 -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -965,7 +1007,7 @@ beginPath(): void struct BeginPath { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -996,13 +1038,15 @@ moveTo(x: number, y: number): void 路径从当前点移动到指定点。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | --------- | | x | number | 是 | 0 | 指定位置的x坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1010,7 +1054,7 @@ moveTo(x: number, y: number): void struct MoveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1039,13 +1083,15 @@ lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------- | | x | number | 是 | 0 | 指定位置的x坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1053,7 +1099,7 @@ lineTo(x: number, y: number): void struct LineTo { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1082,7 +1128,8 @@ closePath(): void 结束当前路径形成一个封闭路径。 -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1090,7 +1137,7 @@ closePath(): void struct ClosePath { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1117,17 +1164,25 @@ closePath(): void ### createPattern -createPattern(image: ImageBitmap, repetition: string): void +createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 通过指定图像和重复方式创建图片填充的模板。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | -- 示例 +**返回值：**： + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | + +**示例：** + ```ts // xxx.ets @Entry @@ -1136,7 +1191,7 @@ createPattern(image: ImageBitmap, repetition: string): void 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) @@ -1164,7 +1219,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, 创建三次贝赛尔曲线的路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------------- | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | @@ -1174,7 +1230,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1182,7 +1239,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, struct BezierCurveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1211,7 +1268,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------- | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | @@ -1219,7 +1277,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1227,6 +1286,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void struct QuadraticCurveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1251,11 +1311,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ### 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, counterclockwise?: boolean): void 绘制弧线路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------------- | ------- | ---- | ----- | ---------- | | x | number | 是 | 0 | 弧线圆心的x坐标值。 | @@ -1263,9 +1324,10 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, | radius | number | 是 | 0 | 弧线的圆半径。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 | - | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1273,7 +1335,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, struct Arc { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1301,7 +1363,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | --------------- | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | @@ -1310,7 +1373,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1318,7 +1382,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void struct ArcTo { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1342,11 +1406,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ### ellipse -ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 在规定的矩形区域绘制一个椭圆。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | ------- | ---- | ----- | ----------------- | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | @@ -1356,9 +1421,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | - | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | + | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | -- 示例 +**示例：** ```ts // xxx.ets @@ -1367,7 +1432,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number struct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1391,19 +1456,21 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ### rect -rect(x: number, y: number, width: number, height: number): void +rect(x: number, y: number, w: number, h: number): void 创建矩形路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | w | number | 是 | 0 | 指定矩形的宽度。 | + | h | number | 是 | 0 | 指定矩形的高度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1411,7 +1478,7 @@ rect(x: number, y: number, width: number, height: number): void struct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1434,11 +1501,19 @@ rect(x: number, y: number, width: number, height: number): void ### fill -fill(): void +fill(fillRule?: CanvasFillRule): void 对封闭路径进行填充。 -- 示例 +**参数:** + + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| + + +**示例:** + ```ts // xxx.ets @Entry @@ -1467,13 +1542,71 @@ fill(): void ![zh-cn_image_0000001238952381](figures/zh-cn_image_0000001238952381.png) +fill(path: Path2D, fillRule?: CanvasFillRule): void + +对封闭路径进行填充。 + +**参数:** + + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | path | Path2D | 是 | | Path2D填充路径。 | + | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| + + +**示例:** + +```ts +// xxx.ets +@Entry +@Component +struct Fill { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let region = new Path2D(); + region.moveTo(30, 90); + region.lineTo(110, 20); + region.lineTo(240, 130); + region.lineTo(60, 130); + region.lineTo(190, 20); + region.lineTo(270, 90); + region.closePath(); + // Fill path + this.context.fillStyle = 'green'; + this.context.fill(region, "evenodd"); + }) + } + .width('100%') + .height('100%') + } +} + ``` + + ![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png) + + ### clip -clip(): void +clip(fillRule?: CanvasFillRule): void 设置当前路径为剪切路径。 -- 示例 +**参数:** + + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| + +**示例:** + ```ts // xxx.ets @Entry @@ -1505,18 +1638,67 @@ clip(): void ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) +clip(path: Path2D, fillRule?: CanvasFillRule): void + +对封闭路径进行填充。该接口为空接口。 + +**参数:** + + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------ | ------ | ---- | ---- | ------------- | + | path | Path2D | 是 | - | Path2D剪切路径。 | + | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| + + + +### filter + +filter(filter: string): void + +为Canvas图形设置各类滤镜效果。该接口为空接口。 + +**参数:** + + | 参数 | 类型 | 必填 | 默认值 | 说明 | + | ------ | ------ | ---- | ---- | ------------- | + | filter | string | 是 | - | 接受各类滤镜效果的函数。| + + +### getTransform + +getTransform(): Matrix2D + +获取当前被应用到上下文的转换矩阵。该接口为空接口。 + + +### resetTransform + +resetTransform(): void + +使用单位矩阵重新设置当前变形。该接口为空接口。 + + +### direction + +direction(direction: CanvasDirection): void + +绘制文本时，描述当前文本方向的属性。该接口为空接口。 + + ### rotate -rotate(rotate: number): void +rotate(angle: number): void 针对当前坐标轴进行顺时针旋转。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ---------------------------------------- | - | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1524,7 +1706,7 @@ rotate(rotate: number): void struct Rotate { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1551,13 +1733,15 @@ scale(x: number, y: number): void 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------- | | x | number | 是 | 0 | 设置水平方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1565,7 +1749,7 @@ scale(x: number, y: number): void struct Scale { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1589,7 +1773,7 @@ scale(x: number, y: number): void ### transform -transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void +transform(a: number, b: number, c: number, d: number, e: number, f: number): void transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 @@ -1600,17 +1784,19 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 > > - y' = skewX \* x + scaleY \* y + translateY -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ------ | ---- | ---- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | - -- 示例 + | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | + | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | + | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | + | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | + | e | number | 是 | 0 |translateX: 指定水平移动值。 | + | f | number | 是 | 0 |translateY: 指定垂直移动值。 | + +**示例：** + ```ts // xxx.ets @Entry @@ -1618,7 +1804,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 struct Transform { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1647,21 +1833,23 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ### setTransform -setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void +setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ------ | ---- | ---- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | - -- 示例 + | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | + | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | + | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | + | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | + | e | number | 是 | 0 |translateX: 指定水平移动值。 | + | f | number | 是 | 0 |translateY: 指定垂直移动值。 | + +**示例：** + ```ts // xxx.ets @Entry @@ -1669,7 +1857,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() struct SetTransform { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1693,19 +1881,26 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() ![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png) +setTransform(transform?: Matrix2D): void + +以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。该接口为空接口。 + + ### translate translate(x: number, y: number): void 移动当前坐标系的原点。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------- | | x | number | 是 | 0 | 设置水平平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1713,7 +1908,7 @@ translate(x: number, y: number): void struct Translate { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1739,27 +1934,29 @@ translate(x: number, y: number): void drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void -drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void -drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void +drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void 进行图像绘制。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | - | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dWidth | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | - | dHeight | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | + | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | + | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | + | dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | + | dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1768,6 +1965,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1789,34 +1987,45 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ### createImageData -createImageData(width: number, height: number): Object +createImageData(sw: number, sh: number): ImageData 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认 | 描述 | | ------ | ------ | ---- | ---- | ------------- | - | width | number | 是 | 0 | ImageData的宽度。 | - | height | number | 是 | 0 | ImageData的高度。 | + | sw | number | 是 | 0 | ImageData的宽度。 | + | sh | number | 是 | 0 | ImageData的高度。 | ### createImageData -createImageData(imageData: Object): Object +createImageData(imageData: ImageData): ImageData 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 -- 参数 - | 参数 | 类型 | 必填 | 默认 | 描述 | +**参数：** + + | 参数 | 类型 | 必填 | 默认 | 描述 | | --------- | ------ | ---- | ---- | ----------------- | - | imagedata | Object | 是 | null | 复制现有的ImageData对象。 | + | imagedata | [ImageData](ts-components-canvas-imagebitmap.md)| 是 | null | 复制现有的ImageData对象。 | + + **返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。| + ### getPixelMap getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 -- 参数 + +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------------- | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | @@ -1824,12 +2033,20 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap | sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 | +**返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | + ### getImageData -getImageData(sx: number, sy: number, sw: number, sh: number): Object +getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 -- 参数 + +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------------- | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | @@ -1837,17 +2054,26 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object | sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 | + **返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | + ### putImageData -putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void +putImageData(imageData: ImageData, dx: number, dy: number): void + +putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ----------- | ------ | ---- | ------------ | ----------------------------- | - | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | + | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 | | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | @@ -1855,7 +2081,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1863,7 +2090,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? struct PutImageData { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1890,13 +2117,208 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png) +### setLineDash + +setLineDash(segments: number[]): void + +设置画布的虚线样式。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | ----- | -------------------- | +| segments | number[] | 描述线段如何交替和线段间距长度的数组。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct SetLineDash { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.arc(100, 75, 50, 0, 6.28) + this.context.setLineDash([10,20]) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![zh-cn_image_000000127777771](figures/zh-cn_image_000000127777771.png) + + +### getLineDash + +getLineDash(): number[] + +获得当前画布的虚线样式。 + +**返回值：** + +| 类型 | 说明 | +| ----- | ------------------------ | +| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct GetLineDash { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.context.arc(100, 75, 50, 0, 6.28) + this.context.setLineDash([10,20]) + this.context.stroke(); + let res = this.context.getLineDash() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### imageSmoothingQuality + +imageSmoothingQuality(quality: imageSmoothingQuality) + +用于设置图像平滑度。该接口为空接口。 + + **参数：** + +| 参数 | 类型 | 描述 | +| ------ | ----------- | ------------------ | +| quality |imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | + + + +### transferFromImageBitmap + +transferFromImageBitmap(bitmap: ImageBitmap): void + +显示给定的ImageBitmap对象。 + +**参数：** + +| 参数 | 类型 | 描述 | +| ------ | ----------- | ------------------ | +| bitmap |[ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct PutImageData { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var imageData = this.offContext.createImageData(100, 100) + for (var i = 0; i < imageData.data.length; i += 4) { + imageData.data[i + 0] = 255 + imageData.data[i + 1] = 0 + imageData.data[i + 2] = 255 + imageData.data[i + 3] = 255 + } + this.offContext.putImageData(imageData, 10, 10) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) + +### toDataURL + +toDataURL(type?: string, quality?: number): string + +生成一个包含图片展示的URL。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 描述 | +| ------- | ------ | ---- | ---------------------------------------- | +| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | +| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | + +**返回值：** + +| 类型 | 说明 | +| ------ | --------- | +| string | 图像的URL地址。 | + +**示例：** + + ```ts + // xxx.ets +@Entry +@Component +struct ToDataURL { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var dataURL = this.context.toDataURL(); + }) + } + .width('100%') + .height('100%') + } +} + ``` + + ### restore restore(): void 对保存的绘图上下文进行恢复。 -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1904,7 +2326,8 @@ restore(): void 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) @@ -1928,7 +2351,8 @@ save(): void 将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。 -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -1936,7 +2360,7 @@ save(): void struct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -1960,7 +2384,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 创建一个线性渐变色。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------- | | x0 | number | 是 | 0 | 起点的x轴坐标。 | @@ -1968,7 +2393,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void | x1 | number | 是 | 0 | 终点的x轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -2007,7 +2433,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, 创建一个径向渐变色。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------------- | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | @@ -2017,7 +2444,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index 765a7f7729bc2e0c25bfdced0f6254fbb048041c..e74488c562835c6153ba7e8127e8f27a44cdb25d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -14,13 +14,13 @@ ## 接口 -Canvas(context: CanvasRenderingContext2D) +Canvas(context?: CanvasRenderingContext2D) -- 参数 +**参数：** | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | - | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 | + | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 | ## 属性 @@ -32,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D) | 名称 | 参数 | 描述 | | ----------------------------- | ---- | -------------------- | -| onReady(callback: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 | +| onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 0fb1be44be8c9363ac88b886c8f255cbaeea99a2..e2f3f510bef985abf5c868223bf71f477219ea80 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -13,3 +13,13 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 | -------- | -------- | -------- | | width | number | ImageBitmap的像素宽度。 | | height | number | ImageBitmap的像素高度。 | + + +## 方法 + + +### close + +close() + +释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。 \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md index 30fb0486828323d525d7f79f732dfe8635fc0ab2..d1df7c7a5ec2294b75c43ee390e0cfb3ccfad0ff 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -13,4 +13,5 @@ ImageData对象可以存储canvas渲染的像素数据。 | -------- | -------- | -------- | | width | number | 矩形区域实际像素宽度。 | | height | number | 矩形区域实际像素高度。 | -| data | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | +| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 6f06e7cdc11a68f3bbf412f2dd78bf2bc515fa41..63004c2e78848e356e474a5ee4b38d13f6162c66 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -9,16 +9,20 @@ ## addPath -addPath(path: Object): void +addPath(path: path2D, transform?:Matrix2D): void 将另一个路径添加到当前的路径对象中。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | path | Object | 是 | null | 需要添加到当前路径的路径对象 | + | path | path2D | 是 | - | 需要添加到当前路径的路径对象。| + | transform | Matrix2D | 否 | null | 新增路径的变换矩阵对象。 | + + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -56,7 +60,8 @@ closePath(): void 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -95,13 +100,15 @@ moveTo(x: number, y: number): void 将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 目标点X轴坐标 | - | y | number | 是 | 0 | 目标点Y轴坐标 | + | x | number | 是 | 0 | 目标点X轴坐标。 | + | y | number | 是 | 0 | 目标点Y轴坐标。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -140,13 +147,15 @@ lineTo(x: number, y: number): void 从当前点绘制一条直线到目标点。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | x | number | 是 | 0 | 目标点X轴坐标 | - | y | number | 是 | 0 | 目标点Y轴坐标 | + | x | number | 是 | 0 | 目标点X轴坐标。 | + | y | number | 是 | 0 | 目标点Y轴坐标。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -186,7 +195,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, 创建三次贝赛尔曲线的路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | @@ -196,7 +206,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -232,7 +243,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | @@ -240,7 +252,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -273,11 +286,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ## 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, counterclockwise?: boolean): void 绘制弧线路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | x | number | 是 | 0 | 弧线圆心的x坐标值。 | @@ -285,9 +299,10 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, | radius | number | 是 | 0 | 弧线的圆半径。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 | - | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -322,7 +337,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | @@ -331,7 +347,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 | -- 示例 +**示例：** + ```ts // xxx.ets @Entry @@ -363,11 +380,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ## ellipse -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, counterclockwise?: number): void 在规定的矩形区域绘制一个椭圆。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | @@ -377,9 +395,10 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | - | anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | + | counterclockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | + +**示例：** -- 示例 ```ts // xxx.ets @Entry @@ -411,19 +430,21 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ## rect -rect(x: number, y: number, width: number, height: number): void +rect(x: number, y: number, w: number, h: number): void 创建矩形路径。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | w | number | 是 | 0 | 指定矩形的宽度。 | + | h | number | 是 | 0 | 指定矩形的高度。 | + +**示例：** -- 示例 ```ts // xxx.ets @Entry diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 014c46e0a07b17a03300aa52c99d881ccddf65b4..29f42de35dc9438639a8b5fe09b9959b92871aed 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -11,39 +11,40 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | - | width | number | 是 | - | 离屏画布的宽度 | - | height | number | 是 | - | 离屏画布的高度 | - | setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | +| width | number | 是 | - | 离屏画布的宽度 | +| height | number | 是 | - | 离屏画布的高度 | +| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | -## 属性 -| 名称 | 类型 | 默认值 | 描述 | -| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用 [createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | -| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | -| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | -| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | -| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | -| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal', 'italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 | -| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
>  **说明：**
> ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 | -| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic 基线不需要考虑下行字母。 | -| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | -| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | -| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | -| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | -| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 | -| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | -| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | -| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | -| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 | +## 属性 -> **说明：** -> <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 +| 名称 | 类型 | 描述 | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | +| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 设置描边的颜色。
- 类型为string时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
- 默认值：'butt'。 | +| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
- 默认值：'miter'。 | +| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
- 默认值：10。 | +| [font](#font) | string | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
- 默认值：'normal normal 14px sans-serif'。 | +| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
- 默认值：'left'。 | +| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
- 默认值：'alphabetic'。 | +| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | +| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。
- 默认值：0.0。 | +| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。
- 默认值：'source-over'。 | +| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。
- 默认值：0.0。 | +| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 | +| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | +| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | +| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
- 默认值：true。 | +| imageSmoothingQuality | string | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。
- 默认值：'low'。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 ### fillStyle @@ -143,7 +144,6 @@ struct StrokeStyleExample { } ``` - ![zh-cn_image_0000001238712437](figures/zh-cn_image_0000001238712437.png) @@ -445,6 +445,7 @@ struct LineDashOffset { .onReady(() =>{ this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.setLineDash([10,20]) + this.offContext.lineDashOffset = 10.0; this.offContext.stroke(); var image = this.offContext.transferToImageBitmap() this.context.transferFromImageBitmap(image) @@ -454,8 +455,8 @@ struct LineDashOffset { .height('100%') } } -``` +``` ![zh-cn_image_0000001238712439](figures/zh-cn_image_0000001238712439.png) @@ -700,7 +701,8 @@ fillRect(x: number, y: number, w: number, h: number): void 填充一个矩形。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | @@ -708,7 +710,8 @@ fillRect(x: number, y: number, w: number, h: number): void | width | number | 是 | 0 | 指定矩形的宽度。 | | height | number | 是 | 0 | 指定矩形的高度。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -745,7 +748,8 @@ strokeRect(x: number, y: number, w: number, h: number): void 绘制具有边框的矩形，矩形内部不填充。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------ | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | @@ -753,7 +757,8 @@ strokeRect(x: number, y: number, w: number, h: number): void | width | number | 是 | 0 | 指定矩形的宽度。 | | height | number | 是 | 0 | 指定矩形的高度。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -789,7 +794,8 @@ clearRect(x: number, y: number, w: number, h: number): void 删除指定区域内的绘制内容。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | @@ -797,7 +803,8 @@ clearRect(x: number, y: number, w: number, h: number): void | width | number | 是 | 0 | 指定矩形的宽度。 | | height | number | 是 | 0 | 指定矩形的高度。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -831,18 +838,21 @@ clearRect(x: number, y: number, w: number, h: number): void ### fillText -fillText(text: string, x: number, y: number): void +fillText(text: string, x: number, y: number, maxWidth?: number): void 绘制填充类文本。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | --------------- | | text | string | 是 | “” | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -879,14 +889,17 @@ strokeText(text: string, x: number, y: number): void 绘制描边类文本。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------------- | | text | string | 是 | “” | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | + | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -923,22 +936,38 @@ measureText(text: string): TextMetrics 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | ---------- | | text | string | 是 | "" | 需要进行测量的文本。 | -- 返回值 + **返回值：** + | 类型 | 说明 | | ----------- | ------- | | TextMetrics | 文本的尺寸信息 | -- TextMetrics类型描述 - | 属性 | 类型 | 描述 | - | ----- | ------ | ------- | - | width | number | 字符串的宽度。 | +**TextMetrics类型描述:** + + | 属性 | 类型 | 描述 | + | ----- | ------ | ------- | + | width | number | 字符串的宽度。 | + | height | number | 字符串的高度。 | + | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | + | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | + | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | + | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| + | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| + | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| + | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| + | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| + | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| + | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| + | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -976,12 +1005,14 @@ stroke(path?: Path2D): void 进行边框绘制操作。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ---------------------------------------- | ---- | ---- | ------------ | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1020,7 +1051,8 @@ beginPath(): void 创建一个新的绘制路径。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1061,13 +1093,15 @@ moveTo(x: number, y: number): void 路径从当前点移动到指定点。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | --------- | | x | number | 是 | 0 | 指定位置的x坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1106,13 +1140,15 @@ lineTo(x: number, y: number): void 从当前点到指定点进行路径连接。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------- | | x | number | 是 | 0 | 指定位置的x坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1151,7 +1187,8 @@ closePath(): void 结束当前路径形成一个封闭路径。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1188,17 +1225,25 @@ closePath(): void ### createPattern -createPattern(image: ImageBitmap, repetition: string): CanvasPattern +createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 通过指定图像和重复方式创建图片填充的模板。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | -- 示例 +**返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | + + **示例：** + ```ts // xxx.ets @Entry @@ -1237,7 +1282,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, 创建三次贝赛尔曲线的路径。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------------- | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | @@ -1247,7 +1293,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1286,7 +1333,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 创建二次贝赛尔曲线的路径。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------- | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | @@ -1294,7 +1342,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void | x | number | 是 | 0 | 路径结束时的x坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1329,11 +1378,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ### 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, counterclockwise?: boolean): void 绘制弧线路径。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------------- | ------- | ---- | ----- | ---------- | | x | number | 是 | 0 | 弧线圆心的x坐标值。 | @@ -1341,9 +1391,10 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, | radius | number | 是 | 0 | 弧线的圆半径。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 | - | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1381,7 +1432,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 依据圆弧经过的点和圆弧半径创建圆弧路径。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | --------------- | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | @@ -1390,7 +1442,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1424,11 +1477,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ### ellipse -ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void +ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 在规定的矩形区域绘制一个椭圆。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | ------- | ---- | ----- | ----------------- | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | @@ -1438,9 +1492,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | - | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | + | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | -- 示例 + **示例：** ```ts // xxx.ets @@ -1475,19 +1529,21 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ### rect -rect(x: number, y: number, width: number, height: number): void +rect(x: number, y: number, w: number, h: number): void 创建矩形路径。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ------------- | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | width | number | 是 | 0 | 指定矩形的宽度。 | - | height | number | 是 | 0 | 指定矩形的高度。 | + | w | number | 是 | 0 | 指定矩形的宽度。 | + | h | number | 是 | 0 | 指定矩形的高度。 | + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1524,7 +1580,8 @@ fill(): void 对封闭路径进行填充。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1561,7 +1618,8 @@ clip(): void 设置当前路径为剪切路径。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1597,16 +1655,18 @@ clip(): void ### rotate -rotate(rotate: number): void +rotate(angle: number): void 针对当前坐标轴进行顺时针旋转。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------ | ------ | ---- | ---- | ---------------------------------------- | - | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | + + **示例：** -- 示例 ```ts // xxx.ets @Entry @@ -1643,13 +1703,15 @@ scale(x: number, y: number): void 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------- | | x | number | 是 | 0 | 设置水平方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1683,28 +1745,30 @@ scale(x: number, y: number): void ### transform -transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void +transform(a: number, b: number, c: number, d: number, e: number, f: number): void transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 -> **说明：** +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > > - x' = scaleX \* x + skewY \* y + translateX > > - y' = skewX \* x + scaleY \* y + translateY -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ------ | ---- | ---- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | - -- 示例 + | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | + | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | + | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | + | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | + | e | number | 是 | 0 |translateX: 指定水平移动值。 | + | f | number | 是 | 0 |translateY: 指定垂直移动值。 | + + **示例：** + ```ts // xxx.ets @Entry @@ -1743,21 +1807,23 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ### setTransform -setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void +setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 -- 参数 +**参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---------- | ------ | ---- | ---- | -------- | - | scaleX | number | 是 | 0 | 指定水平缩放值。 | - | skewX | number | 是 | 0 | 指定水平倾斜值。 | - | skewY | number | 是 | 0 | 指定垂直倾斜值。 | - | scaleY | number | 是 | 0 | 指定垂直缩放值。 | - | translateX | number | 是 | 0 | 指定水平移动值。 | - | translateY | number | 是 | 0 | 指定垂直移动值。 | - -- 示例 + | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | + | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | + | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | + | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | + | e | number | 是 | 0 |translateX: 指定水平移动值。 | + | f | number | 是 | 0 |translateY: 指定垂直移动值。 | + + **示例：** + ```ts // xxx.ets @Entry @@ -1797,13 +1863,15 @@ translate(x: number, y: number): void 移动当前坐标系的原点。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------- | | x | number | 是 | 0 | 设置水平平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1839,27 +1907,29 @@ translate(x: number, y: number): void drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void -drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void -drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void +drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void 进行图像绘制。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ------- | ---------------------------------------- | ---- | ---- | -------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../apis/js-apis-image.md#pixelmap7)| 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | - | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dWidth | number | 否 | 0 | 绘制区域的宽度。 | - | dHeight | number | 否 | 0 | 绘制区域的高度。 | + | dw | number | 否 | 0 | 绘制区域的宽度。 | + | dh | number | 否 | 0 | 绘制区域的高度。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1892,34 +1962,44 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ### createImageData -createImageData(width: number, height: number): Object +createImageData(sw: number, sh: number): ImageData 根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认 | 描述 | | ------ | ------ | ---- | ---- | ------------- | - | width | number | 是 | 0 | ImageData的宽度。 | - | height | number | 是 | 0 | ImageData的高度。 | + | sw | number | 是 | 0 | ImageData的宽度。 | + | sh | number | 是 | 0 | ImageData的高度。 | ### createImageData -createImageData(imageData: ImageData): Object +createImageData(imageData: ImageData): ImageData 根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认 | 描述 | | --------- | ---------------------------------------- | ---- | ---- | ---------------- | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | + **返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | + ### getPixelMap getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 -- 参数 + + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | @@ -1927,13 +2007,21 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap | sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 | +**返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | + + ### getImageData -getImageData(sx: number, sy: number, sw: number, sh: number): Object +getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | --------------- | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | @@ -1941,14 +2029,23 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object | sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 | + **返回值：** + + | 类型 | 说明 | + | ---------- | ---------------------------------------- | + | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 | + ### putImageData -putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void +putImageData(imageData: Object, dx: number, dy: number): void + +putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ----------- | ------ | ---- | ------------ | ----------------------------- | | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | @@ -1959,7 +2056,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -1995,6 +2093,225 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ![zh-cn_image_0000001194192464](figures/zh-cn_image_0000001194192464.png) +### setLineDash + +setLineDash(segments: number[]): void + +设置画布的虚线样式。 + +**参数：** + +| 参数 | 类型 | 描述 | +| -------- | ----- | -------------------- | +| segments | number[] | 描述线段如何交替和线段间距长度的数组。 | + +**示例：** + + ```ts +@Entry +@Component +struct SetLineDash { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.arc(100, 75, 50, 0, 6.28) + this.offContext.setLineDash([10,20]) + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} + ``` + ![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png) + + +### getLineDash + +getLineDash(): number[] + +获得当前画布的虚线样式。 + +**返回值：** + +| 类型 | 说明 | +| ----- | ------------------------ | +| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct GetLineDash { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.offContext.arc(100, 75, 50, 0, 6.28) + this.offContext.setLineDash([10,20]) + this.offContext.stroke(); + let res = this.offContext.getLineDash() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### transferFromImageBitmap + +transferFromImageBitmap(bitmap: ImageBitmap): void + +显示给定的ImageBitmap对象。 + +**参数：** + +| 参数 | 类型 | 描述 | +| ------ | ----------- | ------------------ | +| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 | + +**示例：** + + ```ts + // xxx.ets + @Entry + @Component + struct GetLineDash { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillRect(0, 0, 200, 200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png) + +### toDataURL + +toDataURL(type?: string, quality?: number): string + +生成一个包含图片展示的URL。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 描述 | +| ------- | ------ | ---- | ---------------------------------------- | +| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | +| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | + +**返回值：** + +| 类型 | 说明 | +| ------ | --------- | +| string | 图像的URL地址。 | + +**示例：** + + ```ts + // xxx.ets +@Entry +@Component +struct ToDataURL { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var dataURL = this.offContext.toDataURL(); + }) + } + .width('100%') + .height('100%') + } +} + ``` + + +### transferToImageBitmap + +transferToImageBitmap(): ImageBitmap + +在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 + +**返回值：** + +| 类型 | 说明 | +| ---------------------------------------- | --------------- | +| [ImageData](ts-components-canvas-imagebitmap.md)| 存储离屏画布上渲染的像素数据。 | + + + **示例：** + + ```ts + // xxx.ets + @Entry + @Component + 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() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.restore() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` ### restore @@ -2002,7 +2319,8 @@ restore(): void 对保存的绘图上下文进行恢复。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -2036,7 +2354,8 @@ save(): void 对当前的绘图上下文进行保存。 -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -2070,7 +2389,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void 创建一个线性渐变色。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | -------- | | x0 | number | 是 | 0 | 起点的x轴坐标。 | @@ -2078,7 +2398,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void | x1 | number | 是 | 0 | 终点的x轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry @@ -2120,7 +2441,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, 创建一个径向渐变色。 -- 参数 + **参数：** + | 参数 | 类型 | 必填 | 默认值 | 描述 | | ---- | ------ | ---- | ---- | ----------------- | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | @@ -2130,7 +2452,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | -- 示例 + **示例：** + ```ts // xxx.ets @Entry