如何使用 uni.createCanvasContext 创建 canvas 绘图上下文？

推荐答案

// www.javascriptcn.com code example
// 创建 canvas 绘图上下文
const canvasContext = uni.createCanvasContext('myCanvas', this);

// 设置绘图样式
canvasContext.setFillStyle('#FF0000');
canvasContext.fillRect(10, 10, 150, 75);

// 绘制
canvasContext.draw();

本题详细解读

1. uni.createCanvasContext 方法

uni.createCanvasContext 是 uni-app 提供的一个 API，用于创建 canvas 的绘图上下文。它允许你在 canvas 上绘制图形、文本、图像等。

2. 参数说明

• canvasId: 必填，表示 canvas 组件的唯一标识符。在示例中，'myCanvas' 是 canvas 组件的 canvas-id 属性值。
• this: 可选，表示当前组件实例。在自定义组件中使用时，需要传入 this，以确保上下文正确。

3. 绘图步骤

1. 创建上下文: 使用 uni.createCanvasContext 创建绘图上下文。
2. 设置样式: 使用 setFillStyle、setStrokeStyle 等方法设置绘图样式。
3. 绘制图形: 使用 fillRect、strokeRect、drawImage 等方法绘制图形或图像。
4. 调用 draw 方法: 最后调用 draw 方法将绘制内容渲染到 canvas 上。

4. 示例代码解析

• setFillStyle('#FF0000'): 设置填充颜色为红色。
• fillRect(10, 10, 150, 75): 在 canvas 上绘制一个红色的矩形，起点坐标为 (10, 10)，宽度为 150，高度为 75。
• draw(): 将绘制的图形渲染到 canvas 上。

5. 注意事项

• 在自定义组件中使用时，务必传入 this 参数，以确保上下文正确。
• draw 方法是异步的，绘制操作会在下一个事件循环中执行。