开发 API 画布 CanvasContext CanvasContext
# CanvasContext
更新时间：2024-09-18 14:46:36
# 属性
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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
设置文字的竖直对齐。