HarmonyOS鸿蒙Next中Canvas的使用

ArkUI的Canvas组件用于自定义绘制图形，可能包括路径、形状、文本、图像等。需要了解如何创建Canvas组件，设置其属性，以及使用绘制上下文进行绘图操作。

在HarmonyOS的ArkUI框架中，Canvas组件用于实现自定义绘图（如形状、路径、文本、图像等）。以下是使用Canvas的基本步骤和示例：

1. Canvas基础用法

1.1 创建 Canvas 组件

在.ets文件中添加Canvas组件，并设置其宽高：

Canvas({ context: this.ctx })
  .width('100%')
  .height('100%')
  .onReady(() => {
    // Canvas准备就绪后触发，可在此处绘制内容
    this.draw();
  });

1.2 获取绘图上下文

通过@State变量保存绘图上下文CanvasRenderingContext2D：

[@State](/user/State) ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D();

2. 绘制图形

在onReady回调或自定义方法中调用绘图API：

2.1 绘制矩形

draw() {
  // 填充矩形
  this.ctx.fillStyle = '#FF0000'; // 设置填充颜色
  this.ctx.fillRect(50, 50, 100, 100); // (x, y, width, height)

  // 描边矩形
  this.ctx.strokeStyle = '#0000FF'; // 设置描边颜色
  this.ctx.lineWidth = 2; // 设置线宽
  this.ctx.strokeRect(200, 50, 100, 100);
}

2.2 绘制路径

draw() {
  this.ctx.beginPath(); // 开始路径
  this.ctx.moveTo(50, 50); // 起点
  this.ctx.lineTo(150, 50); // 连线到点
  this.ctx.lineTo(100, 150); 
  this.ctx.closePath(); // 闭合路径

  this.ctx.fillStyle = '#00FF00';
  this.ctx.fill(); // 填充路径
  this.ctx.stroke(); // 描边路径
}

2.3 绘制文本

draw() {
  this.ctx.font = '30px sans-serif'; // 设置字体
  this.ctx.fillStyle = '#333';
  this.ctx.fillText('Hello ArkUI!', 50, 200); // 填充文本
  this.ctx.strokeText('Hello Canvas!', 50, 250); // 描边文本
}

2.4 绘制图像

draw() {
  const image = this.ctx.createImage('common/images/example.jpg');
  image.onload = () => {
    this.ctx.drawImage(image, 50, 300, 100, 100); // 绘制图片
  }
}

3. 实现动画

通过定时更新绘图状态实现动画：

[@State](/user/State) angle: number = 0;

animate() {
  this.ctx.clearRect(0, 0, this.ctx.width, this.ctx.height); // 清空画布

  // 绘制旋转矩形
  this.ctx.save(); // 保存当前绘图状态
  this.ctx.translate(200, 200); // 移动原点
  this.ctx.rotate(this.angle * Math.PI / 180); // 旋转角度
  this.ctx.fillStyle = '#FFA500';
  this.ctx.fillRect(-50, -50, 100, 100);
  this.ctx.restore(); // 恢复之前保存的状态

  this.angle += 2; // 更新角度
  if (this.angle >= 360) this.angle = 0;

  requestAnimationFrame(this.animate); // 循环调用
}