# CanvasContext

# 属性

属性	类型	必填	说明
canvas	Canvas	否
fillStyle	string	是	填充颜色
font	string	是	当前字体样式的属性。符合 CSS font 语法的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif
globalAlpha	number	是	全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明
globalCompositeOperation	'darken' \| 'destination-out' \| 'hard-light' \| 'lighten' \| 'lighter' \| 'overlay' \| 'source-atop' \| 'source-over' \| 'xor'	是	在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 fill 填充块的合成，用于 stroke 线段的合成效果都是 source-over
lineCap	'butt' \| 'round' \| 'square'	是	线条的端点样式
lineDashOffset	number	是	虚线偏移量，初始值为 0
lineJoin	'round' \| 'bevel' \| 'miter'	是	线条的交点样式
lineWidth	number	是	线条的宽度
miterLimit	number	是	最大斜接长度
shadowBlur	number	是	阴影的模糊级别
shadowColor	string	是	阴影的颜色
shadowOffsetX	number	是	阴影相对于形状在水平方向的偏移
shadowOffsetY	number	是	阴影相对于形状在竖直方向的偏移
strokeStyle	string	是	边框颜色
textAlign	'left' \| 'center' \| 'right'	是	设置文字的对齐
textBaseline	'top' \| 'buttom' \| 'middle' \| 'normal'	是	设置文字的竖直对齐

# lineCap

线条的端点样式

值	说明
'butt'	向线条的每个末端添加平直的边缘
'round'	向线条的每个末端添加圆形线帽
'square'	向线条的每个末端添加正方形线帽

# lineJoin

线条的交点样式

值	说明
'round'	圆角
'bevel'	斜角
'miter'	尖角

# textAlign

设置文字的对齐

值	说明
'left'	左对齐
'center'	居中对齐
'right'	右对齐

# textBaseline

设置文字的竖直对齐

值	说明
'top'	顶部对齐
'buttom'
'middle'	居中对齐
'normal'	不对齐

# 方法

# CanvasContext.arc

创建一条弧线。

# CanvasContext.arcTo

根据控制点和半径绘制圆弧路径。

# CanvasContext.beginPath

开始创建一个路径。

# CanvasContext.bezierCurveTo

创建三次方贝塞尔曲线路径。

# CanvasContext.clearRect

清除画布上在该矩形区域内的内容。

# CanvasContext.clip

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过 restore 方法对其进行恢复。

# CanvasContext.closePath

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

# CanvasContext.createPattern

对指定的图像创建模式的方法，可在指定的方向上重复源图像。

# CanvasContext.draw

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

# CanvasContext.drawImage

绘制图像到画布。

# CanvasContext.fill

对当前路径中的内容进行填充。默认的填充色为黑色。

# CanvasContext.fillRect

用 fillStyle 设置的填充色，填充一个矩形。

# CanvasContext.fillText

在画布上绘制文本。

# CanvasContext.lineTo

增加一个新点，然后创建一条从上次指定点到目标点的线。

# CanvasContext.measureText

测量文本尺寸信息。

# CanvasContext.moveTo

把路径移动到画布中的指定点，不创建线条。

# CanvasContext.quadraticCurveTo

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

# CanvasContext.rect

创建一个矩形路径。

# CanvasContext.restore

恢复之前保存的绘图上下文。

# CanvasContext.rotate

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。

# CanvasContext.save

保存绘图上下文。

# CanvasContext.scale

随后创建的路径的横纵坐标会被缩放。多次调用倍数会相乘。

# CanvasContext.setTransform

使用矩阵重新设置（覆盖）当前变换的方法。

# CanvasContext.stroke

画出当前路径的边框。

# CanvasContext.strokeRect

用 strokeStyle 设置的线条色，画一个矩形(非填充)。

# CanvasContext.strokeText

绘制文本描边。

# CanvasContext.transform

使用矩阵多次叠加当前变换的方法。

# CanvasContext.translate

对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

# CanvasContext.setFillStyle

设置填充色。

# CanvasContext.setFontSize

设置字体的字号。

# CanvasContext.setGlobalAlpha

设置全局画笔透明度。

# CanvasContext.setLineCap

设置线条的端点样式。

# CanvasContext.setLineDash

设置虚线样式。

# CanvasContext.setLineJoin

设置线条的交点样式。

# CanvasContext.setLineWidth

设置线条的宽度。

# CanvasContext.setMiterLimit

设置最大斜接长度。

# CanvasContext.setShadow

设置阴影样式。

# CanvasContext.setStrokeStyle

设置描边颜色。

# CanvasContext.setTextAlign

设置文字的对齐。

# CanvasContext.setTextBaseline

设置文字的竖直对齐。