使用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'。
|