# CanvasContext

> 相关文档: [旧版画布迁移指南](/miniprogram/dev/framework/ability/canvas-legacy-migration.md)、[canvas 组件介绍](/miniprogram/dev/component/canvas.md)

canvas 组件的绘图上下文。CanvasContext 是旧版的接口， 新版 Canvas 2D 接口与 Web 一致。

## 属性

### string|[CanvasGradient](/miniprogram/dev/api/canvas/CanvasGradient) fillStyle

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

填充颜色。用法同 [CanvasContext.setFillStyle()](/miniprogram/dev/api/canvas/CanvasContext.setFillStyle)。

### string|[CanvasGradient](/miniprogram/dev/api/canvas/CanvasGradient) strokeStyle

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

边框颜色。用法同 [CanvasContext.setStrokeStyle()](/miniprogram/dev/api/canvas/CanvasContext.setStrokeStyle)。

### number shadowOffsetX

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

阴影相对于形状在水平方向的偏移

### number shadowOffsetY

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

阴影相对于形状在竖直方向的偏移

### number shadowColor

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

阴影的颜色

### number shadowBlur

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

阴影的模糊级别

### number lineWidth

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

线条的宽度。用法同 [CanvasContext.setLineWidth()](/miniprogram/dev/api/canvas/CanvasContext.setLineWidth)。

### string lineCap

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

线条的端点样式。用法同 [CanvasContext.setLineCap()](/miniprogram/dev/api/canvas/CanvasContext.setLineCap)。

### string lineJoin

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

线条的交点样式。用法同 [CanvasContext.setLineJoin()](/miniprogram/dev/api/canvas/CanvasContext.setLineJoin)。

**lineJoin 的合法值**

| 值 | 说明 | 最低版本 |
| -- | ---- | ---- |
| bevel | 斜角 |  |
| round | 圆角 |  |
| miter | 尖角 |  |

### number miterLimit

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

最大斜接长度。用法同 [CanvasContext.setMiterLimit()](/miniprogram/dev/api/canvas/CanvasContext.setMiterLimit)。

### number lineDashOffset

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

虚线偏移量，初始值为0

### string font

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif。

### number globalAlpha

全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。

### string globalCompositeOperation

> 基础库 1.9.90 开始支持，低版本需做[兼容处理](1003706)。

在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成，用于 `stroke` 线段的合成效果都是 `source-over`。

目前支持的操作有
- 安卓：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
- iOS：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

## 方法

### [CanvasContext.draw(boolean reserve, function callback)](/miniprogram/dev/api/canvas/CanvasContext.draw)

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

### [CanvasGradient CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)](/miniprogram/dev/api/canvas/CanvasContext.createLinearGradient)

创建一个线性的渐变颜色。返回的`CanvasGradient`对象需要使用 [CanvasGradient.addColorStop()](/miniprogram/dev/api/canvas/CanvasGradient.addColorStop) 来指定渐变点，至少要两个。

### [CanvasGradient CanvasContext.createCircularGradient(number x, number y, number r)](/miniprogram/dev/api/canvas/CanvasContext.createCircularGradient)

创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的`CanvasGradient`对象需要使用 [CanvasGradient.addColorStop()](/miniprogram/dev/api/canvas/CanvasGradient.addColorStop) 来指定渐变点，至少要两个。

### [CanvasContext.createPattern(string image, string repetition)](/miniprogram/dev/api/canvas/CanvasContext.createPattern)

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

### [Object CanvasContext.measureText(string text)](/miniprogram/dev/api/canvas/CanvasContext.measureText)

测量文本尺寸信息。目前仅返回文本宽度。同步接口。

### [CanvasContext.save()](/miniprogram/dev/api/canvas/CanvasContext.save)

保存绘图上下文。

### [CanvasContext.restore()](/miniprogram/dev/api/canvas/CanvasContext.restore)

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

### [CanvasContext.beginPath()](/miniprogram/dev/api/canvas/CanvasContext.beginPath)

开始创建一个路径。需要调用 `fill` 或者 `stroke` 才会使用路径进行填充或描边

  - 在最开始的时候相当于调用了一次 `beginPath`。
  - 同一个路径内的多次 `setFillStyle`、`setStrokeStyle`、`setLineWidth`等设置，以最后一次设置为准。

### [CanvasContext.moveTo(number x, number y)](/miniprogram/dev/api/canvas/CanvasContext.moveTo)

把路径移动到画布中的指定点，不创建线条。用 `stroke` 方法来画线条

### [CanvasContext.lineTo(number x, number y)](/miniprogram/dev/api/canvas/CanvasContext.lineTo)

增加一个新点，然后创建一条从上次指定点到目标点的线。用 `stroke` 方法来画线条

### [CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)](/miniprogram/dev/api/canvas/CanvasContext.quadraticCurveTo)

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

### [CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)](/miniprogram/dev/api/canvas/CanvasContext.bezierCurveTo)

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

### [CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)](/miniprogram/dev/api/canvas/CanvasContext.arc)

创建一条弧线。

  - 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
  - 用 `stroke` 或者 `fill` 方法来在 `canvas` 中画弧线。

### [CanvasContext.rect(number x, number y, number width, number height)](/miniprogram/dev/api/canvas/CanvasContext.rect)

创建一个矩形路径。需要用 [`fill`](/miniprogram/dev/api/canvas/CanvasContext.fill) 或者 [`stroke`](/miniprogram/dev/api/canvas/CanvasContext.stroke) 方法将矩形真正的画到 `canvas` 中

### [CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)](/miniprogram/dev/api/canvas/CanvasContext.arcTo)

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

### [CanvasContext.clip()](/miniprogram/dev/api/canvas/CanvasContext.clip)

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

### [CanvasContext.fillRect(number x, number y, number width, number height)](/miniprogram/dev/api/canvas/CanvasContext.fillRect)

填充一个矩形。用 [`setFillStyle`](/miniprogram/dev/api/canvas/CanvasContext.setFillStyle) 设置矩形的填充色，如果没设置默认是黑色。

### [CanvasContext.strokeRect(number x, number y, number width, number height)](/miniprogram/dev/api/canvas/CanvasContext.strokeRect)

画一个矩形(非填充)。 用 [`setStrokeStyle`](/miniprogram/dev/api/canvas/CanvasContext.setStrokeStyle) 设置矩形线条的颜色，如果没设置默认是黑色。

### [CanvasContext.clearRect(number x, number y, number width, number height)](/miniprogram/dev/api/canvas/CanvasContext.clearRect)

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

### [CanvasContext.fill()](/miniprogram/dev/api/canvas/CanvasContext.fill)

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

### [CanvasContext.stroke()](/miniprogram/dev/api/canvas/CanvasContext.stroke)

画出当前路径的边框。默认颜色色为黑色。

### [CanvasContext.closePath()](/miniprogram/dev/api/canvas/CanvasContext.closePath)

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

### [CanvasContext.scale(number scaleWidth, number scaleHeight)](/miniprogram/dev/api/canvas/CanvasContext.scale)

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

### [CanvasContext.rotate(number rotate)](/miniprogram/dev/api/canvas/CanvasContext.rotate)

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 `translate` 方法修改。

### [CanvasContext.translate(number x, number y)](/miniprogram/dev/api/canvas/CanvasContext.translate)

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

### [CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)](/miniprogram/dev/api/canvas/CanvasContext.drawImage)

绘制图像到画布

### [CanvasContext.strokeText(string text, number x, number y, number maxWidth)](/miniprogram/dev/api/canvas/CanvasContext.strokeText)

给定的 (x, y) 位置绘制文本描边的方法

### [CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)](/miniprogram/dev/api/canvas/CanvasContext.transform)

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

### [CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)](/miniprogram/dev/api/canvas/CanvasContext.setTransform)

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

### [CanvasContext.setFillStyle(string|CanvasGradient color)](/miniprogram/dev/api/canvas/CanvasContext.setFillStyle)

设置填充色。

### [CanvasContext.setStrokeStyle(string|CanvasGradient color)](/miniprogram/dev/api/canvas/CanvasContext.setStrokeStyle)

设置描边颜色。

### [CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)](/miniprogram/dev/api/canvas/CanvasContext.setShadow)

设定阴影样式。

### [CanvasContext.setGlobalAlpha(number alpha)](/miniprogram/dev/api/canvas/CanvasContext.setGlobalAlpha)

设置全局画笔透明度。

### [CanvasContext.setLineWidth(number lineWidth)](/miniprogram/dev/api/canvas/CanvasContext.setLineWidth)

设置线条的宽度

### [CanvasContext.setLineJoin(string lineJoin)](/miniprogram/dev/api/canvas/CanvasContext.setLineJoin)

设置线条的交点样式

### [CanvasContext.setLineCap(string lineCap)](/miniprogram/dev/api/canvas/CanvasContext.setLineCap)

设置线条的端点样式

### [CanvasContext.setLineDash(Array. pattern, number offset)](/miniprogram/dev/api/canvas/CanvasContext.setLineDash)

设置虚线样式。

### [CanvasContext.setMiterLimit(number miterLimit)](/miniprogram/dev/api/canvas/CanvasContext.setMiterLimit)

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 [CanvasContext.setLineJoin()](/miniprogram/dev/api/canvas/CanvasContext.setLineJoin) 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

### [CanvasContext.fillText(string text, number x, number y, number maxWidth)](/miniprogram/dev/api/canvas/CanvasContext.fillText)

在画布上绘制被填充的文本

### [CanvasContext.setFontSize(number fontSize)](/miniprogram/dev/api/canvas/CanvasContext.setFontSize)

设置字体的字号

### [CanvasContext.setTextAlign(string align)](/miniprogram/dev/api/canvas/CanvasContext.setTextAlign)

设置文字的对齐

### [CanvasContext.setTextBaseline(string textBaseline)](/miniprogram/dev/api/canvas/CanvasContext.setTextBaseline)

设置文字的竖直对齐