黑神话：悟空的UI设计太好看辣，我也想在HarmonyOS上画一个好看的图案——Canvas组件

本文链接：https://blog.csdn.net/2301_79624024/article/details/141790037

创建Canvas实例

在鸿蒙应用中，Canvas类用于创建一个绘图区域。开发者可以通过设置Canvas的宽度和高度来定义这个区域的大小。Canvas实例在准备好进行绘制后，会触发onReady事件，开发者可以在这个回调函数中开始绘制操作。

@Component 
struct MyCanvas {  
    private settings: RenderingContextSettings = new RenderingContextSettings(true);  
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
    build() {    
        Flex({      
            direction: FlexDirection.Column,      
            alignItems: ItemAlign.Center,      
            justifyContent: FlexAlign.Center    
        	})
        Canvas(this.context)
            .width('100%')
            .height('100%') 
            .onReady(() => {
            // 在这里开始绘制       
        })   
    }  
  } 
}

基本图形绘制

Canvas提供了一系列的方法来绘制基本图形，如矩形、圆形、椭圆等。这些方法通常需要指定图形的位置、尺寸和样式。

 this.context.fillStyle = '#FF0000'; // 设置填充颜色 
this.context.fillRect(50, 50, 100, 100); // 绘制一个红色的矩形 
this.context.beginPath(); 
this.context.arc(150, 75, 50, 0, 2 * Math.PI); // 绘制一个圆形 
this.context.fill(); // 填充圆形

路径和线条

Path2D对象允许开发者创建复杂的路径，并可以通过CanvasRenderingContext2D的方法来绘制这些路径。这对于绘制自定义形状非常有用。

let path = new Path2D(); 
path.moveTo(10, 10);
path.lineTo(200, 10);
path.lineTo(100, 150); 
path.closePath(); // 闭合路径 
this.context.stroke(path); // 绘制路径的轮廓

文本绘制

Canvas还支持文本绘制，开发者可以设置文本的字体、大小、颜色和对齐方式。

this.context.font = '20px Arial';
this.context.fillStyle = '#0000FF';
this.context.textAlign = 'center'; 
this.context.textBaseline = 'middle';
this.context.fillText('Hello, World!', 150, 75);

图像绘制

Canvas可以绘制图像，这对于将图片集成到图形中非常有用。

let image = new Image(); 
image.src = 'path/to/your/image.png'; 
image.onload = () => {  
    this.context.drawImage(image, 0, 0, 100, 100); // 绘制图像
};

样式和效果

Canvas支持多种样式和效果，如渐变、图案填充、阴影等，这些可以通过CanvasRenderingContext2D的方法来实现。

let gradient = this.context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#FFFF00'); 
gradient.addColorStop(1, '#FF0000');
this.context.fillStyle = gradient;
this.context.fillRect(0, 150, 200, 100); // 使用线性渐变填充矩形

性能优化

在进行Canvas绘制时，性能优化至关重要。开发者应该注意减少不必要的重绘，使用离屏Canvas进行复杂操作，以及合理使用Canvas的save()和restore()方法来管理绘图状态。通过上述方法，开发者可以在鸿蒙系统中利用Canvas创建丰富的图形用户界面。鸿蒙系统的Canvas API提供了强大的功能，使得即使是复杂的图形绘制任务也能高效实现。随着鸿蒙系统的不断发展和完善，Canvas API也在不断更新，提供更多的功能和更好的性能。开发者应关注华为开发者官方文档，以获取最新的API信息和最佳实践。

鸿蒙系统Canvas绘制案例：

模拟时钟在鸿蒙应用中，Canvas不仅可以用于绘制静态图形，还可以创建动态的用户界面元素，如模拟时钟。通过结合Canvas的绘制方法和定时器，我们可以创建一个实时更新的时钟界面。代码实现首先，我们需要创建一个新的鸿蒙应用组件，并在其中初始化Canvas和相关的绘制上下文。在onReady回调中，我们将开始绘制表盘和指针，并设置定时器来更新时钟的显示。

@Component // 声明这是一个组件
struct AnalogClock {
  private settings: RenderingContextSettings = new RenderingContextSettings(true); // 设置渲染上下文设置，启用图像平滑
  private context: CanvasRenderingContext2D; // 声明Canvas上下文
  private clockRadius: number; // 时钟半径
  private canvasSize: number; // 画布尺寸
  private time: Date; // 当前时间

  build() { // 构建时钟的方法
    this.clockRadius = 100; // 设置时钟半径
    this.canvasSize = this.clockRadius * 2; // 设置画布尺寸为时钟半径的两倍
    this.time = new Date(); // 初始化当前时间
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { // 使用Flex布局创建垂直居中的容器
      Canvas(this.context).width(this.canvasSize).height(this.canvasSize).onReady(() => { // 创建Canvas元素，并设置宽度和高度，在Canvas准备好后执行回调函数
        this.paintDial(); // 调用paintDial方法绘制表盘
        this.renderClock(); // 调用renderClock方法开始时钟动画
      })
    }
  }

  private paintDial() { // 绘制表盘的方法
    this.context.beginPath(); // 开始路径
    this.context.arc(this.clockRadius, this.clockRadius, this.clockRadius, 0, 2 * Math.PI); // 绘制圆形路径，作为表盘的边界
    this.context.fillStyle = '#F5DC62'; // 设置填充颜色为黄色
    this.context.fill(); // 填充圆形
  }

  private renderClock() { // 渲染时钟的方法
    const now = new Date(); // 获取当前时间
    const hourAngle = now.getHours() * Math.PI / 6 + now.getMinutes() / 360 * Math.PI / 6; // 计算时针角度
    const minuteAngle = now.getMinutes() * Math.PI / 30; // 计算分针角度
    const secondAngle = now.getSeconds() * Math.PI / 30; // 计算秒针角度
    this.paintPin(hourAngle, 'hour'); // 绘制时针
    this.paintPin(minuteAngle, 'minute'); // 绘制分针
    this.paintPin(secondAngle, 'second'); // 绘制秒针
    this.time = now; // 更新时钟的时间
    setTimeout(this.renderClock.bind(this), 1000); // 设置定时器，每秒更新一次时钟显示
  }

  private paintPin(angle: number, type: string) { // 绘制指针的方法
    this.context.save(); // 保存当前的绘图状态
    this.context.translate(this.clockRadius, this.clockRadius); // 将坐标原点移动到表盘中心
    this.context.rotate(angle); // 旋转到指针的角度
    this.context.lineWidth = 5; // 设置线宽
    this.context.strokeStyle = type === 'hour' ? '#888' : type === 'minute' ? '#000' : '#E87361'; // 设置不同指针的颜色
    if (type === 'hour' || type === 'minute') { // 如果是时针或分针
      this.context.beginPath(); // 开始路径
      this.context.moveTo(0, 0); // 移动到指针的起点
      this.context.lineTo(this.clockRadius - 10, 0); // 绘制到指针的末端
      this.context.stroke(); // 绘制线条
    } else { // 如果是秒针
      this.context.beginPath(); // 开始路径
      this.context.arc(0, 0, 5, 0, 2 * Math.PI); // 绘制一个小圆作为秒针的头部
      this.context.fill(); // 填充小圆
    }
    this.context.restore(); // 恢复绘图状态
  }
}

在这个案例中，我们首先定义了表盘的半径和Canvas的大小。在onReady回调中，我们调用paintDial方法来绘制表盘，并启动renderClock方法来绘制指针和设置定时器。paintPin方法用于绘制时针、分针和秒针，并通过save和restore方法来管理绘图状态。通过这种方式，我们创建了一个动态更新的模拟时钟界面。