DrawableContext

DrawableContext 属性值

名称	类型	必备	默认值	描述
font	string	是	10px	设置字体大小
fillStyle	string	是	#000 (黑色)	设置填充颜色
lineCap	string	是	butt	指定如何绘制每一条线条末端的属性，可选值：butt线段末端以方形结束；round线段末端以圆形结束；square线段末端以方形结束，但是会增加一个一半宽度的矩形区域。
lineDashOffset	number	是	-	设置虚线偏移量
lineJoin	string	是	miter	设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性，可选值：bevel斜角；round圆角；miter尖角。
lineWidth	number	是	1px	设置线条的宽度
strokeStyle	string	是	#000 (黑色)	设置边框的颜色
textAlign	string	是	left	设置文本的对齐方式，可取值：left左对齐；center居中对齐；right右对齐。

方法

beginPath()

创建一个新的空路径

arc(x, y, radius, startAngle, endAngle, anticlockwise?)

绘制一段弧线

参数

名称	类型	必填	默认值	描述
x	number	是	-	圆心的X轴坐标
y	number	是	-	圆心的Y轴坐标
radius	number	是	-	圆弧的半径
startAngle	number	是	-	圆弧的起始点，x 轴方向开始计算，单位为弧度
endAngle	number	是	-	圆弧的终点，单位为弧度
anticlockwise	boolean	否	true	圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。

moveTo(x, y)

将一个新的路径的起始点移动到 (x，y) 坐标

参数

名称	类型	必填	默认值	描述
x	number	是	-	点的X轴坐标
y	number	是	-	点的Y轴坐标

rect(x, y, width, height)

创建一个矩形路径

参数

名称	类型	必填	默认值	描述
x	number	是	-	矩形起点的X轴坐标
y	number	是	-	矩形起点的Y轴坐标
width	number	是	-	矩形宽度
height	number	是	-	矩形高度

lineTo(x, y)

将路径的最后一个点连接到 (x，y) 坐标

参数

名称	类型	必填	默认值	描述
x	number	是	-	线终点的X轴坐标
y	number	是	-	线终点的Y轴坐标

closePath()

闭合路径，将最后一个点与起点连接起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。

stroke()

绘制当前或已经存在的路径的边框。

strokeRect(x, y, width, height)

绘制一个矩形框

参数

名称	类型	必填	默认值	描述
x	number	是	-	矩形起点的X轴坐标
y	number	是	-	矩形起点的Y轴坐标
width	number	是	-	矩形宽度
height	number	是	-	矩形高度

strokeText(text, x, y)

绘制空心字符

参数

名称	类型	必填	默认值	描述
text	string	是	-	要绘制的字符
x	number	是	-	字符开始绘制的X轴坐标
y	number	是	-	字符开始绘制的Y轴坐标

fill(fillRule?)

填充当前或已存在的路径

参数

名称	类型	必填	默认值	描述
fillRule	string	否	nonzero	填充规则。可取值：nonzero非零环绕规则；evenodd奇偶环绕规则。

fillRect(x, y, width, height)

绘制一个实心矩形

参数

名称	类型	必填	默认值	描述
x	number	是	-	矩形起点的X轴坐标
y	number	是	-	矩形起点的Y轴坐标
width	number	是	-	矩形宽度
height	number	是	-	矩形高度

fillText(text, x, y)

绘制实心字符

参数

名称	类型	必填	默认值	描述
text	string	是	-	要绘制的字符
x	number	是	-	字符开始绘制的X轴坐标
y	number	是	-	字符开始绘制的Y轴坐标

reset()

清空绘制数据

update()

将所有绘制内容更新到画布上

setLineDash(segments)

设置虚线样式

参数

名称	类型	必填	默认值	描述
segments	number[]	是	-	一组描述交替绘制线段和间距长度的数字。