1 Canvas 画布组件

1. Canvas 定义介绍
ArkUI 提供的 Canvas 组件本质是一个“空白画布”，它承载所有自绘制操作。创建时，需要传入一个 CanvasRenderingContext2D 实例作为画笔：

interface CanvasInterface {
  (context?: CanvasRenderingContext2D): CanvasAttribute;
}

2. Canvas 事件介绍
Canvas 在初始化完成后，会在 onReady 回调中暴露上下文，这时即可调用所有绘图 API：

declare class CanvasAttribute extends CommonMethod<CanvasAttribute> {
  onReady(event: () => void): CanvasAttribute;
}

示例：

Canvas(this.context)
  .size({ width: '100%', height: '100%' })
  .onReady(() => {
    // 所有绘制操作均在此回调内执行
    this.context.fillRect(10, 10, 130, 40);
  });

---

2 CanvasRenderingContext2D 常用方法

CanvasRenderingContext2D 继承自 CanvasPath，是 W3C 标准画笔 API 的实现，常用方法包括：

1. drawImage：在画布上绘制图像
2. fillRect：绘制矩形（默认黑色填充）
3. fillText：绘制文本
4. measureText：测量文本宽度
5. rotate：旋转整个画布坐标系
6. save / restore：保存与恢复画布状态

declare class CanvasRenderer extends CanvasPath {
  drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void;
  fillRect(x: number, y: number, w: number, h: number): void;
  fillText(text: string, x: number, y: number, maxWidth?: number): void;
  measureText(text: string): TextMetrics;
  rotate(angle: number): void;
  save(): void;
  restore(): void;
  // …其他方法省略
}

由于标准 API 调用较为繁琐，社区中常见封装 MiniCanvas 来简化操作，下面我们介绍它的使用。

---

3 MiniCanvas 组件（精简 API）

MiniCanvas 是对原生 Canvas 的轻量级封装，提供一组 drawXXX() 方法和一个 Paint 画笔对象，让常见绘制仅需一行代码。

1. drawLine(startX, startY, stopX, stopY, paint)

let paint = new Paint();
paint.setColor(Color.Red.toString());
paint.setStrokeWidth(4);
canvas.drawLine(10, 10, 200, 10, paint);

2. drawText(text, x, y, paint, maxWidth?)

let paint = new Paint().setFontSize(vp2px(30));
canvas.drawText("OpenHarmony", 10, 40, paint);

3. drawCircle(x, y, radius, paint)

let paint = new Paint();
canvas.drawCircle(90, 45, 30, paint);
paint.setStroke(true).setColor("#ff0000");
canvas.drawCircle(170, 45, 30, paint);

4. drawOval(x, y, width, height, paint)

let paint = new Paint();
canvas.drawOval(10, 10, 150, 60, paint);

5. drawRect(x, y, width, height, paint)

let paint = new Paint();
canvas.drawRect(10, 10, 150, 50, paint);

6. drawRoundRect(x, y, width, height, radius, paint)

let paint = new Paint();
canvas.drawRoundRect(10, 10, 150, 50, 10, paint);

7. drawArc(x, y, radius, startAngle, endAngle, paint, counterclockwise?)

let paint = new Paint().setStroke(true);
canvas.drawArc(30, 30, 30, 0, 130, paint);

8. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, paint)

let img = new ImageBitmap("pages/test.jpg");
canvas.drawImage(img, 0, 0, 500, 500, 10, 10, 250, 100);

---