> 文档中心 > HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(一)总述

HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(一)总述

使用RenderingContext在Canvas组件上进行绘制,绘制对象可以是矩形、文本、图片等。从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

接口CanvasRenderingContext2D(setting: RenderingContextSetting)

参数:

参数名

参数类型

必填

参数描述

setting

RenderingContextSettings

见RenderingContextSettings。

RenderingContextSettings

RenderingContextSettings(antialias?: boolean)

用来配置CanvasRenderingContext2D对象的参数,包括是否开启抗锯齿。

参数:

参数名

参数类型

必填

参数描述

antialias

boolean

表明canvas是否开启抗锯齿。

默认值:false

属性

名称

类型

描述

fillStyle

string | CanvasGradient | CanvasPattern

指定绘制的填充色。

- 类型为string时,表示设置填充区域的颜色。

- 类型为CanvasGradient时,表示渐变对象,使用createLinearGradient方法创建。

- 类型为CanvasPattern时,使用createPattern方法创建。

lineWidth

number

设置绘制线条的宽度。

strokeStyle

string | CanvasGradient | CanvasPattern

设置描边的颜色。

- 类型为string时,表示设置描边使用的颜色。

- 类型为CanvasGradient时,表示渐变对象,使用createLinearGradient方法创建。

- 类型为CanvasPattern时,使用createPattern方法创建。

lineCap

CanvasLineCap

指定线端点的样式,可选值为:

- 'butt':线端点以方形结束。

- 'round':线端点以圆形结束。

- 'square':线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。

默认值:'butt'

lineJoin

CanvasLineJoin

指定线段间相交的交点样式,可选值为:

- 'round':在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。

- 'bevel':在线段相连处使用三角形为底填充, 每个部分矩形拐角独立。

- 'miter':在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。

默认值:'miter'

miterLimit

number

设置斜接面限制值,该值指定了线条相交处内角和外角的距离。

默认值:10

font

string

设置文本绘制中的字体样式。

语法:ctx.font='font-size font-family'

- font-size(可选),指定字号和行高,单位只支持px。

- font-family(可选),指定字体系列。

语法:ctx.font='font-style font-weight font-size font-family'

- font-style(可选),用于指定字体样式,支持如下几种样式:'normal','italic'。

- font-weight(可选),用于指定字体的粗细,支持如下几种类型:'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。

- font-size(可选),指定字号和行高,单位只支持px。

- font-family(可选),指定字体系列,支持如下几种类型:'sans-serif', 'serif', 'monospace'。

默认值:'normal normal 14px sans-serif'

textAlign

CanvasTextAlign

设置文本绘制中的文本对齐方式,可选值为:

- 'left':文本左对齐。

- 'right':文本右对齐。

- 'center':文本居中对齐。

- 'start':文本对齐界线开始的地方。

- 'end':文本对齐界线结束的地方。

ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。

默认值:'left'

textBaseline

CanvasTextBaseline

设置文本绘制中的水平对齐方式,可选值为:

- 'alphabetic':文本基线是标准的字母基线。

- 'top':文本基线在文本块的顶部。

- 'hanging':文本基线是悬挂基线。

- 'middle':文本基线在文本块的中间。

- 'ideographic':文字基线是表意字基线;如果字符本身超出了alphabetic基线,那么ideograhpic基线位置在字符本身的底部。

- 'bottom':文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。

默认值:'alphabetic'

globalAlpha

number

设置透明度,0.0为完全透明,1.0为完全不透明。

lineDashOffset

number

设置画布的虚线偏移量,精度为float。

默认值:0.0

globalCompositeOperation

string

设置合成操作的方式。类型字段可选值有'source-over','source-atop','source-in','source-out','destination-over','destination-atop','destination-in','destination-out','lighter','copy','xor'。

默认值:'source-over'

shadowBlur

number

设置绘制阴影时的模糊级别,值越大越模糊,精度为float。

默认值:0.0

shadowColor

string

设置绘制阴影时的阴影颜色。

shadowOffsetX

number

设置绘制阴影时和原有对象的水平偏移值。

shadowOffsetY

number

设置绘制阴影时和原有对象的垂直偏移值。

imageSmoothingEnabled

boolean

用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。

默认值:true

说明,fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)','rgba(255, 255, 255, 1.0)','#FFFFFF'。