[文章]HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（一）总述
0
1
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
接口，CanvasRenderingContext2D(setting: RenderingContextSetting)。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| setting | RenderingContextSettings | 是 | 见RenderingContextSettings。 |
RenderingContextSettings
RenderingContextSettings(antialias?: boolean)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| antialias | boolean | 否 | 表明canvas是否开启抗锯齿。默认值：false |
属性
| 名称 | 类型 | 描述 |
|---|---|---|
| fillStyle | string | CanvasGradient |
| lineWidth | number | 设置绘制线条的宽度。 |
| strokeStyle | string | CanvasGradient |
| 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'。
回帖高级模式
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉