使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
RenderingContextSettings
RenderingContextSettings(antialias?: boolean)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
从API version 9开始，该接口支持在ArkTS卡片中使用。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| antialias | boolean | 否 | 表明canvas是否开启抗锯齿。默认值：false |
属性
| 名称 | 类型 | 描述 | |||
|---|---|---|---|---|---|
| fillStyle | string | number10+ | CanvasGradient | CanvasPattern | 指定绘制的填充色。- 类型为string时，表示设置填充区域的颜色。默认值：'black'- 类型为number时，表示设置填充区域的颜色。默认值：'#000000'- 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。- 类型为CanvasPattern时，使用createPattern方法创建。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| lineWidth | number | 设置绘制线条的宽度。默认值：1(px)单位：vplinewidth取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。 | |||
| strokeStyle | string | number10+ | CanvasGradient | CanvasPattern | 设置线条的颜色。- 类型为string时，表示设置线条使用的颜色。默认值：'black'- 类型为number时，表示设置线条使用的颜色。默认值：'#000000'- 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。- 类型为CanvasPattern时，使用createPattern方法创建。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| lineCap | CanvasLineCap | 指定线端点的样式，可选值为：- 'butt'：线端点以方形结束。- 'round'：线端点以圆形结束。- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。默认值：'butt'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| lineJoin | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。默认值：'miter'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| miterLimit | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。默认值：10单位：pxmiterLimit取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| font | string | 设置文本绘制中的字体样式。语法：ctx.font='font-size font-family'- font-size(可选)，指定字号和行高，单位支持px和vp。- font-family(可选)，指定字体系列。语法：ctx.font='font-style font-weight font-size font-family'- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。- font-size(可选)，指定字号和行高，单位支持px、vp。使用时需要添加单位。- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。默认值：'normal normal 14px sans-serif'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| textAlign | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：- 'left'：文本左对齐。- 'right'：文本右对齐。- 'center'：文本居中对齐。- 'start'：文本对齐界线开始的地方。- 'end'：文本对齐界线结束的地方。ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。默认值：'left'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| textBaseline | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：- 'alphabetic'：文本基线是标准的字母基线。- 'top'：文本基线在文本块的顶部。- 'hanging'：文本基线是悬挂基线。- 'middle'：文本基线在文本块的中间。- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。默认值：'alphabetic'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| globalAlpha | number | 设置透明度，0.0为完全透明，1.0为完全不透明。默认值：1.0从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| lineDashOffset | number | 设置画布的虚线偏移量，精度为float。默认值：0.0单位：px从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| globalCompositeOperation | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。默认值：'source-over'从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| shadowBlur | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。默认值：0.0shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| shadowColor | string | 设置绘制阴影时的阴影颜色。默认值：透明黑色。从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| shadowOffsetX | number | 设置绘制阴影时和原有对象的水平偏移值。默认值：0单位：vp从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| shadowOffsetY | number | 设置绘制阴影时和原有对象的垂直偏移值。默认值：0单位：vp从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| imageSmoothingEnabled | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。默认值：true从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| height | number | 组件高度。单位：vp从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| width | number | 组件宽度。单位：vp从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| imageSmoothingQuality | ImageSmoothingQuality | imageSmoothingEnabled为true时，用于设置图像平滑度。默认值：ImageSmoothingQuality.low从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| direction | CanvasDirection | 用于设置绘制文字时使用的文字方向。默认值：CanvasDirection.inherit从API version 9开始，该接口支持在ArkTS卡片中使用。 | |||
| filter | string | 用于设置图像的滤镜。支持的滤镜效果如下：- 'none': 无滤镜效果- 'blur'：给图像设置高斯模糊- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗- 'contrast'：调整图像的对比度- 'grayscale'：将图像转换为灰度图像- 'hue-rotate'：给图像应用色相旋转- 'invert'：反转输入图像- 'opacity'：转化图像的透明程度- 'saturate'：转换图像饱和度- 'sepia'：将图像转换为深褐色默认值：'none'从API version 9开始，该接口支持在ArkTS卡片中使用。 |
说明
fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'#FFFFFF'。
fillStyle
// xxx.ets@Entry@Componentstruct FillStyleExample { 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.fillStyle = '#0000ff' this.context.fillRect(20, 20, 150, 100) }) } .width('100%') .height('100%') }}
lineWidth
// xxx.ets@Entry@Componentstruct LineWidthExample { 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.lineWidth = 5 this.context.strokeRect(25, 25, 85, 105) }) } .width('100%') .height('100%') }}
strokeStyle
// xxx.ets@Entry@Componentstruct StrokeStyleExample { 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.lineWidth = 10 this.context.strokeStyle = '#0000ff' this.context.strokeRect(25, 25, 155, 105) }) } .width('100%') .height('100%') }}
lineCap
// xxx.ets@Entry@Componentstruct LineCapExample { 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.lineWidth = 8 this.context.beginPath() this.context.lineCap = 'round' this.context.moveTo(30, 50) this.context.lineTo(220, 50) this.context.stroke() }) } .width('100%') .height('100%') }}
lineJoin
// xxx.ets@Entry@Componentstruct LineJoinExample { 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.beginPath() this.context.lineWidth = 8 this.context.lineJoin = 'miter' this.context.moveTo(30, 30) this.context.lineTo(120, 60) this.context.lineTo(30, 110) this.context.stroke() }) } .width('100%') .height('100%') }}
miterLimit
// xxx.ets@Entry@Componentstruct MiterLimit { 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.lineWidth = 8 this.context.lineJoin = 'miter' this.context.miterLimit = 3 this.context.moveTo(30, 30) this.context.lineTo(60, 35) this.context.lineTo(30, 37) this.context.stroke() }) } .width('100%') .height('100%') }}
font
// xxx.ets@Entry@Componentstruct Fonts { 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.font = '30px sans-serif' this.context.fillText("Hello px", 20, 60) this.context.font = '30vp sans-serif' this.context.fillText("Hello vp", 20, 100) }) } .width('100%') .height('100%') }}
textAlign
// xxx.ets@Entry@Componentstruct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.context.strokeStyle = '#0000ff' this.context.moveTo(140, 10) this.context.lineTo(140, 160) this.context.stroke() this.context.font = '18px sans-serif' this.context.textAlign = 'start' this.context.fillText('textAlign=start', 140, 60) this.context.textAlign = 'end' this.context.fillText('textAlign=end', 140, 80) this.context.textAlign = 'left' this.context.fillText('textAlign=left', 140, 100) this.context.textAlign = 'center' this.context.fillText('textAlign=center',140, 120) this.context.textAlign = 'right' this.context.fillText('textAlign=right',140, 140) }) } .width('100%') .height('100%') }}
