---
name: "CanvasContext"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "CanvasContext"
---

## CanvasContext

> [VERSION] 基础库 >= 2.21.8

> 💡 CanvasContext 是小程序画布的绘图上下文，用于在 canvas 组件上绘制图形。
> 所有绘制操作需要在调用 draw() 方法后才会绘制到画布上。

### 描述

CanvasContext 实例，可通过 ty.createCanvasContext 获取

### 参数

无


### 返回值

类型: `CanvasContext`

CanvasContext 实例

#### 方法

| 方法名 | 说明 |
| --- | --- |
| `draw` | 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中 |
| `createLinearGradient` | 创建线性渐变 |
| `createCircularGradient` | 创建圆形渐变 |
| `beginPath` | 开始创建一个路径 |
| `moveTo` | 把路径移动到画布中的指定点，不创建线条 |
| `lineTo` | 增加一个新点，然后创建一条从上次指定点到目标点的线 |
| `arc` | 创建一条弧线 |
| `arcTo` | 根据控制点和半径绘制圆弧路径 |
| `quadraticCurveTo` | 创建二次贝塞尔曲线路径 |
| `bezierCurveTo` | 创建三次方贝塞尔曲线路径 |
| `rect` | 创建一个矩形路径 |
| `closePath` | 关闭一个路径，会连接起点和终点 |
| `fill` | 对当前路径中的内容进行填充 |
| `stroke` | 画出当前路径的边框 |
| `fillRect` | 填充一个矩形 |
| `strokeRect` | 画一个矩形（非填充） |
| `clearRect` | 清除画布上在该矩形区域内的内容 |
| `fillText` | 在画布上绘制被填充的文本 |
| `strokeText` | 给定的 (x, y) 位置绘制文本描边 |
| `scale` | 在调用后，之后创建的路径其横纵坐标会被缩放 |
| `rotate` | 以原点为中心顺时针旋转当前坐标轴 |
| `translate` | 对当前坐标系的原点 (0, 0) 进行变换 |
| `transform` | 使用矩阵多次叠加当前变换 |
| `setTransform` | 使用矩阵重新设置（覆盖）当前变换 |
| `save` | 保存绘图上下文 |
| `restore` | 恢复之前保存的绘图上下文 |
| `setFillStyle` | 设置填充色 |
| `setStrokeStyle` | 设置描边颜色 |
| `setGlobalAlpha` | 设置全局画笔透明度 |
| `setShadow` | 设定阴影样式 |
| `setFontSize` | 设置字体的字号 |
| `setLineCap` | 设置线条的端点样式 |
| `setLineJoin` | 设置线条的交点样式 |
| `setLineWidth` | 设置线条的宽度 |
| `setMiterLimit` | 设置最大斜接长度 |
| `setTextAlign` | 设置文字的对齐 |
| `setTextBaseline` | 设置文字的竖直对齐 |
| `setLineDash` | 设置虚线样式 |

### 示例代码

#### 基本使用

```ts
Page({
  onReady() {
    const ctx = ty.createCanvasContext('myCanvas');
    ctx.setFillStyle('#ff0000');
    ctx.fillRect(10, 10, 150, 100);
    ctx.draw();
  },
});
```