Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 874f2ba2 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9281 canvas 文档整改-3.1release 

Merge pull request !9281 from lanyi/locallanyi66
上级 0546e8f3 132045a2
显示空白变更内容
内联 并排
Showing with 1485 addition and 639 deletion
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 874f2ba2
# CanvasRenderingContext2D对象 # CanvasRenderingContext2D对象
> **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -14,49 +13,48 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ...@@ -14,49 +13,48 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings ### RenderingContextSettings
RenderingContextSettings(antialias?: bool) RenderingContextSettings(antialias?: boolean)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---- | ---- | ----- | ---------------- | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | | --------- | ------- | ---- | ----- | ---------------- |
| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性 ## 属性
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 | | [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 | | [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'。 |
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 | | [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 | | [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 | | [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值：'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 | | [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'left'。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 | | [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 | | [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 | | [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 | | [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>默认值：'source-over'。 |
| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 | | [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0。 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 | | [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 | | [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 | | [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：** >fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
>
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
### fillStyle ### fillStyle
...@@ -427,6 +425,7 @@ struct LineDashOffset { ...@@ -427,6 +425,7 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0;
this.context.stroke(); this.context.stroke();
}) })
} }
...@@ -597,6 +596,7 @@ struct ShadowOffsetX { ...@@ -597,6 +596,7 @@ struct ShadowOffsetX {
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -661,15 +661,18 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -661,15 +661,18 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。 填充一个矩形。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | | ------ | ------ | ---- | ---- | ------------- |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
...@@ -702,20 +705,24 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -702,20 +705,24 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。 绘制具有边框的矩形，矩形内部不填充。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | ------ | ------ | ---- | ---- | ------------ |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -742,20 +749,24 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -742,20 +749,24 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。 删除指定区域内的绘制内容。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | ------ | ------ | ---- | ---- | ------------- |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -779,24 +790,29 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -779,24 +790,29 @@ clearRect(x: number, y: number, w: number, h: number): void
### fillText ### 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坐标。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -819,24 +835,29 @@ fillText(text: string, x: number, y: number): void ...@@ -819,24 +835,29 @@ fillText(text: string, x: number, y: number): void
### strokeText ### 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坐标。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -864,27 +885,48 @@ measureText(text: string): TextMetrics ...@@ -864,27 +885,48 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值 | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
**返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------- | ------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述 **TextMetrics类型描述:**
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ----- | ------ | ------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | 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 @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -913,12 +955,15 @@ stroke(path?: Path2D): void ...@@ -913,12 +955,15 @@ stroke(path?: Path2D): void
进行边框绘制操作。 进行边框绘制操作。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
...@@ -954,7 +999,9 @@ beginPath(): void ...@@ -954,7 +999,9 @@ beginPath(): void
创建一个新的绘制路径。 创建一个新的绘制路径。
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
...@@ -992,13 +1039,16 @@ moveTo(x: number, y: number): void ...@@ -992,13 +1039,16 @@ 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 @Entry
@Component @Component
struct MoveTo { struct MoveTo {
...@@ -1034,13 +1084,16 @@ lineTo(x: number, y: number): void ...@@ -1034,13 +1084,16 @@ 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 @Entry
@Component @Component
struct LineTo { struct LineTo {
...@@ -1076,7 +1129,9 @@ closePath(): void ...@@ -1076,7 +1129,9 @@ closePath(): void
结束当前路径形成一个封闭路径。 结束当前路径形成一个封闭路径。
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
...@@ -1109,18 +1164,27 @@ closePath(): void ...@@ -1109,18 +1164,27 @@ closePath(): void
### createPattern ### 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'、&nbsp;'repeat-y'、'no-repeat'。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**返回值：**：
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
...@@ -1156,17 +1220,20 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1156,17 +1220,20 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | ---- | ------ | ---- | ---- | -------------- |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
...@@ -1202,20 +1269,24 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1202,20 +1269,24 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | ---- | ------ | ---- | ---- | ----------- |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -1240,22 +1311,25 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1240,22 +1311,25 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
### arc ### arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。 绘制弧线路径。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | ------------- | ------- | ---- | ----- | ---------- |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
...@@ -1290,16 +1364,19 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1290,16 +1364,19 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | ------ | ------ | ---- | ---- | --------------- |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
...@@ -1329,25 +1406,27 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1329,25 +1406,27 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
### ellipse ### 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轴坐标。 | | ------------- | ------- | ---- | ----- | ----------------- |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**示例：** **示例：**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1377,20 +1456,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1377,20 +1456,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
### rect ### 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坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1419,12 +1501,21 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1419,12 +1501,21 @@ rect(x: number, y: number, width: number, height: number): void
### fill ### fill
fill(): void fill(fillRule?: CanvasFillRule): void
对封闭路径进行填充。 对封闭路径进行填充。
**示例：** **参数:**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
**示例:**
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
...@@ -1451,14 +1542,73 @@ fill(): void ...@@ -1451,14 +1542,73 @@ fill(): void
![zh-cn_image_0000001238952381](figures/zh-cn_image_0000001238952381.png) ![zh-cn_image_0000001238952381](figures/zh-cn_image_0000001238952381.png)
fill(path: Path2D, fillRule?: CanvasFillRule): void
对封闭路径进行填充。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | | Path2D填充路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："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
clip(): void clip(fillRule?: CanvasFillRule): void
设置当前路径为剪切路径。 设置当前路径为剪切路径。
**示例：** **参数:**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
**示例:**
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
...@@ -1488,19 +1638,69 @@ clip(): void ...@@ -1488,19 +1638,69 @@ clip(): void
![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png) ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png)
clip(path: Path2D, fillRule?: CanvasFillRule): void
对封闭路径进行填充。该接口为空接口。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | - | Path2D剪切路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
### filter
filter(filter: string): void
为Canvas图形设置各类滤镜效果。该接口为空接口。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。|
### getTransform
getTransform(): Matrix2D
获取当前被应用到上下文的转换矩阵。该接口为空接口。
### resetTransform
resetTransform(): void
使用单位矩阵重新设置当前变形。该接口为空接口。
### direction
direction(direction: CanvasDirection): void
绘制文本时，描述当前文本方向的属性。该接口为空接口。
### rotate ### rotate
rotate(rotate: number): void rotate(angle: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
...@@ -1534,13 +1734,16 @@ scale(x: number, y: number): void ...@@ -1534,13 +1734,16 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | ---- | ------ | ---- | ---- | ----------- |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
...@@ -1570,11 +1773,11 @@ scale(x: number, y: number): void ...@@ -1570,11 +1773,11 @@ scale(x: number, y: number): void
### transform ### 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方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> >
> - x' = scaleX \* x + skewY \* y + translateX > - x' = scaleX \* x + skewY \* y + translateX
...@@ -1582,17 +1785,20 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1582,17 +1785,20 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
> - y' = skewX \* x + scaleY \* y + translateY > - y' = skewX \* x + scaleY \* y + translateY
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | ---------- | ------ | ---- | ---- | -------- |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
...@@ -1627,22 +1833,25 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1627,22 +1833,25 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
### setTransform ### 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()方法会重置现有的变换矩阵并创建新的变换矩阵。 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | ---------- | ------ | ---- | ---- | -------- |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
...@@ -1672,6 +1881,11 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() ...@@ -1672,6 +1881,11 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png) ![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png)
setTransform(transform?: Matrix2D): void
以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。该接口为空接口。
### translate ### translate
translate(x: number, y: number): void translate(x: number, y: number): void
...@@ -1679,13 +1893,16 @@ translate(x: number, y: number): void ...@@ -1679,13 +1893,16 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x | number | 是 | 0 | 设置水平平移量。 | | ---- | ------ | ---- | ---- | -------- |
| y | number | 是 | 0 | 设置竖直平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
...@@ -1717,34 +1934,38 @@ translate(x: number, y: number): void ...@@ -1717,34 +1934,38 @@ translate(x: number, y: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: 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坐标值。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | | dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -1766,74 +1987,104 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1766,74 +1987,104 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
### createImageData ### createImageData
createImageData(width: number, height: number): Object createImageData(sw: number, sh: number): ImageData
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 创建新的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
createImageData(imageData: Object): Object createImageData(imageData: ImageData): ImageData
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 创建新的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
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | ---- | ------ | ---- | ---- | --------------- |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 |
### getImageData ### 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)对象。 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | ---- | ------ | ---- | ---- | --------------- |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### putImageData ### 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](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
...@@ -1866,6 +2117,200 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1866,6 +2117,200 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png) ![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',&nbsp;'medium',&nbsp;'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
restore(): void restore(): void
...@@ -1873,12 +2318,15 @@ restore(): void ...@@ -1873,12 +2318,15 @@ restore(): void
对保存的绘图上下文进行恢复。 对保存的绘图上下文进行恢复。
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1901,10 +2349,12 @@ restore(): void ...@@ -1901,10 +2349,12 @@ restore(): void
save(): void save(): void
对当前的绘图上下文进行保存。 将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1935,15 +2385,18 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -1935,15 +2385,18 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。 创建一个线性渐变色。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x0 | number | 是 | 0 | 起点的x轴坐标。 | | ---- | ------ | ---- | ---- | -------- |
| y0 | number | 是 | 0 | 起点的y轴坐标。 | | x0 | number | 是 | 0 | 起点的x轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 | | y0 | number | 是 | 0 | 起点的y轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 | | x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
...@@ -1981,17 +2434,20 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1981,17 +2434,20 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。 创建一个径向渐变色。
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | | ---- | ------ | ---- | ---- | ----------------- |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 | | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
**示例：** **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 874f2ba2
# Canvas # Canvas
> **说明：** > **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件，用于自定义绘制图形。 提供画布组件，用于自定义绘制图形。
...@@ -16,13 +14,13 @@ ...@@ -16,13 +14,13 @@
## 接口 ## 接口
Canvas(context: CanvasRenderingContext2D) Canvas(context?: CanvasRenderingContext2D)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 | | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 |
## 属性 ## 属性
...@@ -34,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D) ...@@ -34,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D)
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ----------------------------- | ---- | -------------------- | | ----------------------------- | ---- | -------------------- |
| onReady(callback: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 | | onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 874f2ba2
# ImageBitmap对象 # ImageBitmap对象
> **说明：** > **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
CanvasImageData对象可以存储canvas渲染的像素数据。 ImageBitmap对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- | | -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | ImageBitmap的像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | ImageBitmap的像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
## 方法
### close
close()
释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 874f2ba2
# ImageData对象 # ImageData对象
> **说明：** > **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -11,7 +10,8 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -11,7 +10,8 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- | | -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | | data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 874f2ba2
# Path2D对象 # Path2D对象
> **说明：** > **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -10,17 +9,22 @@ ...@@ -10,17 +9,22 @@
## addPath ## addPath
addPath(path: Object): void addPath(path: path2D, transform?:Matrix2D): void
将另一个路径添加到当前的路径对象中。 将另一个路径添加到当前的路径对象中。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- | | -------- | -------- | -------- | -------- | -------- |
| path | Object | 是 | null | 需要添加到当前路径的路径对象 | | path | path2D | 是 | - | 需要添加到当前路径的路径对象。|
| transform | Matrix2D | 否 | null | 新增路径的变换矩阵对象。 |
- 示例
``` **示例：**
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct AddPath { struct AddPath {
...@@ -56,8 +60,10 @@ closePath(): void ...@@ -56,8 +60,10 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
...@@ -94,14 +100,17 @@ moveTo(x: number, y: number): void ...@@ -94,14 +100,17 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标 | | x | number | 是 | 0 | 目标点X轴坐标。 |
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
...@@ -138,14 +147,17 @@ lineTo(x: number, y: number): void ...@@ -138,14 +147,17 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。 从当前点绘制一条直线到目标点。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标 | | x | number | 是 | 0 | 目标点X轴坐标。 |
| y | number | 是 | 0 | 目标点Y轴坐标 | | y | number | 是 | 0 | 目标点Y轴坐标。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
...@@ -183,9 +195,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -183,9 +195,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- | | -------- | -------- | -------- | -------- | -------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
...@@ -193,8 +206,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -193,8 +206,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
...@@ -228,16 +243,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -228,16 +243,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | -------- | -------- | -------- | -------- | -------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
...@@ -268,22 +286,25 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -268,22 +286,25 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
## arc ## arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。 绘制弧线路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- | | -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
...@@ -316,17 +337,20 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -316,17 +337,20 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- | | -------- | -------- | -------- | -------- | -------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
...@@ -356,13 +380,14 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -356,13 +380,14 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
## ellipse ## 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轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
...@@ -370,10 +395,12 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -370,10 +395,12 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | | counterclockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -403,20 +430,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -403,20 +430,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
## rect ## 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坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 874f2ba2
...@@ -11,39 +11,40 @@ ...@@ -11,39 +11,40 @@
OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) 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) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',&nbsp;'italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic&nbsp;基线不需要考虑下行字母。 |
| [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) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> **说明：** | 名称 | 类型 | 描述 |
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>-&nbsp;默认值：'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>-&nbsp;默认值：'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>-&nbsp;默认值：10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>-&nbsp;默认值：'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>-&nbsp;默认值：'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>-&nbsp;默认值：'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>-&nbsp;默认值：0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>-&nbsp;默认值：'source-over'。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>-&nbsp;默认值：0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>-&nbsp;默认值：true。 |
| imageSmoothingQuality | string | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。<br/>-&nbsp;默认值：'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 ### fillStyle
...@@ -143,7 +144,6 @@ struct StrokeStyleExample { ...@@ -143,7 +144,6 @@ struct StrokeStyleExample {
} }
``` ```
![zh-cn_image_0000001238712437](figures/zh-cn_image_0000001238712437.png) ![zh-cn_image_0000001238712437](figures/zh-cn_image_0000001238712437.png)
...@@ -445,6 +445,7 @@ struct LineDashOffset { ...@@ -445,6 +445,7 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.lineDashOffset = 10.0;
this.offContext.stroke(); this.offContext.stroke();
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
...@@ -454,8 +455,8 @@ struct LineDashOffset { ...@@ -454,8 +455,8 @@ struct LineDashOffset {
.height('100%') .height('100%')
} }
} }
```
```
![zh-cn_image_0000001238712439](figures/zh-cn_image_0000001238712439.png) ![zh-cn_image_0000001238712439](figures/zh-cn_image_0000001238712439.png)
...@@ -700,7 +701,8 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -700,7 +701,8 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。 填充一个矩形。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
...@@ -708,8 +710,10 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -708,8 +710,10 @@ fillRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
...@@ -744,7 +748,8 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -744,7 +748,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。 绘制具有边框的矩形，矩形内部不填充。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ | | ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
...@@ -752,8 +757,10 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -752,8 +757,10 @@ strokeRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
...@@ -787,7 +794,8 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -787,7 +794,8 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。 删除指定区域内的绘制内容。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
...@@ -795,8 +803,10 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -795,8 +803,10 @@ clearRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
...@@ -828,19 +838,23 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -828,19 +838,23 @@ clearRect(x: number, y: number, w: number, h: number): void
### fillText ### fillText
fillText(text: string, x: number, y: number): void fillText(text: string, x: number, y: number, maxWidth?: number): void
绘制填充类文本。 绘制填充类文本。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
...@@ -875,15 +889,19 @@ strokeText(text: string, x: number, y: number): void ...@@ -875,15 +889,19 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。 绘制描边类文本。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
...@@ -918,23 +936,40 @@ measureText(text: string): TextMetrics ...@@ -918,23 +936,40 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值 **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------- | ------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述 **TextMetrics类型描述:**
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ----- | ------ | ------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | 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 @Entry
@Component @Component
struct MeasureText { struct MeasureText {
...@@ -970,13 +1005,16 @@ stroke(path?: Path2D): void ...@@ -970,13 +1005,16 @@ stroke(path?: Path2D): void
进行边框绘制操作。 进行边框绘制操作。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ | | ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
...@@ -1013,8 +1051,10 @@ beginPath(): void ...@@ -1013,8 +1051,10 @@ beginPath(): void
创建一个新的绘制路径。 创建一个新的绘制路径。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
...@@ -1053,14 +1093,17 @@ moveTo(x: number, y: number): void ...@@ -1053,14 +1093,17 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。 路径从当前点移动到指定点。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
...@@ -1097,14 +1140,17 @@ lineTo(x: number, y: number): void ...@@ -1097,14 +1140,17 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。 从当前点到指定点进行路径连接。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
...@@ -1141,8 +1187,10 @@ closePath(): void ...@@ -1141,8 +1187,10 @@ closePath(): void
结束当前路径形成一个封闭路径。 结束当前路径形成一个封闭路径。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
...@@ -1177,18 +1225,27 @@ closePath(): void ...@@ -1177,18 +1225,27 @@ closePath(): void
### createPattern ### createPattern
createPattern(image: ImageBitmap, repetition: string): CanvasPattern createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null
通过指定图像和重复方式创建图片填充的模板。 通过指定图像和重复方式创建图片填充的模板。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例 **返回值：**
```
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：**
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
...@@ -1225,7 +1282,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1225,7 +1282,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
...@@ -1235,8 +1293,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1235,8 +1293,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
...@@ -1273,7 +1333,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1273,7 +1333,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
...@@ -1281,8 +1342,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1281,8 +1342,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
...@@ -1315,11 +1378,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1315,11 +1378,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
### arc ### arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。 绘制弧线路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- | | ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
...@@ -1327,10 +1391,12 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1327,10 +1391,12 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
...@@ -1366,7 +1432,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1366,7 +1432,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
...@@ -1375,8 +1442,10 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1375,8 +1442,10 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
...@@ -1408,11 +1477,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1408,11 +1477,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
### ellipse ### 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轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
...@@ -1422,11 +1492,12 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1422,11 +1492,12 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例 **示例：**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1458,20 +1529,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1458,20 +1529,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
### rect ### 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坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -1506,8 +1580,10 @@ fill(): void ...@@ -1506,8 +1580,10 @@ fill(): void
对封闭路径进行填充。 对封闭路径进行填充。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
...@@ -1542,8 +1618,10 @@ clip(): void ...@@ -1542,8 +1618,10 @@ clip(): void
设置当前路径为剪切路径。 设置当前路径为剪切路径。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
...@@ -1577,17 +1655,20 @@ clip(): void ...@@ -1577,17 +1655,20 @@ clip(): void
### rotate ### rotate
rotate(rotate: number): void rotate(angle: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
...@@ -1622,14 +1703,17 @@ scale(x: number, y: number): void ...@@ -1622,14 +1703,17 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
...@@ -1661,29 +1745,32 @@ scale(x: number, y: number): void ...@@ -1661,29 +1745,32 @@ scale(x: number, y: number): void
### transform ### 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方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> **说明：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> >
> - x' = scaleX \* x + skewY \* y + translateX > - x' = scaleX \* x + skewY \* y + translateX
> >
> - y' = skewX \* x + scaleY \* y + translateY > - y' = skewX \* x + scaleY \* y + translateY
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
...@@ -1720,22 +1807,25 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1720,22 +1807,25 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
### setTransform ### 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()方法会重置现有的变换矩阵并创建新的变换矩阵。 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
...@@ -1773,14 +1863,17 @@ translate(x: number, y: number): void ...@@ -1773,14 +1863,17 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
...@@ -1814,28 +1907,31 @@ translate(x: number, y: number): void ...@@ -1814,28 +1907,31 @@ translate(x: number, y: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: 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。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../apis/js-apis-image.md#pixelmap7)| 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 | | dw | number | 否 | 0 | 绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 | | dh | number | 否 | 0 | 绘制区域的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Index { struct Index {
...@@ -1866,34 +1962,44 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, ...@@ -1866,34 +1962,44 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
### createImageData ### createImageData
createImageData(width: number, height: number): Object createImageData(sw: number, sh: number): ImageData
根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 | | sw | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 | | sh | number | 是 | 0 | ImageData的高度。 |
### createImageData ### createImageData
createImageData(imageData: ImageData): Object createImageData(imageData: ImageData): ImageData
根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。 根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- | | --------- | ---------------------------------------- | ---- | ---- | ---------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
### getPixelMap ### getPixelMap
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
...@@ -1901,13 +2007,21 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -1901,13 +2007,21 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
### getImageData ### 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)对象。 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
...@@ -1915,14 +2029,23 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1915,14 +2029,23 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
### putImageData ### 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](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
...@@ -1933,8 +2056,10 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1933,8 +2056,10 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
...@@ -1968,6 +2093,225 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? ...@@ -1968,6 +2093,225 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
![zh-cn_image_0000001194192464](figures/zh-cn_image_0000001194192464.png) ![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 ### restore
...@@ -1975,8 +2319,10 @@ restore(): void ...@@ -1975,8 +2319,10 @@ restore(): void
对保存的绘图上下文进行恢复。 对保存的绘图上下文进行恢复。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -2008,8 +2354,10 @@ save(): void ...@@ -2008,8 +2354,10 @@ save(): void
对当前的绘图上下文进行保存。 对当前的绘图上下文进行保存。
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -2041,7 +2389,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2041,7 +2389,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。 创建一个线性渐变色。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 | | x0 | number | 是 | 0 | 起点的x轴坐标。 |
...@@ -2049,8 +2398,10 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2049,8 +2398,10 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| x1 | number | 是 | 0 | 终点的x轴坐标。 | | x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
...@@ -2090,7 +2441,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2090,7 +2441,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。 创建一个径向渐变色。
- 参数 **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- | | ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
...@@ -2100,8 +2452,10 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2100,8 +2452,10 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例 **示例：**
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或