前面我们讲过几期鸿蒙自定义View 的教程，赶着现在国庆，周边到处都是挂满的过期，咋们也来出一期鸿蒙自定义View实现五星红旗的教程

首先，我们特别需要注意的是 五星红旗 在国旗法中有明确的制法说明。

其要点大概是：宽与高之比为3比2，五颗星都在左上四分之一小矩形内，最大星直径约为高的十分之一，四个小五解星的一个角要指向大五角星的中心。

1. 实现步骤

我们将使用 CanvasRenderingContext2D 来绘制五星红旗。主要包含以下步骤：

绘制红色矩形背景。使用五角星绘制函数分别绘制一个大五角星和四个小五角星。1.1 五角星绘制函数

我们定义了一个通用的 drawStar 函数，用来在给定的中心点位置绘制五角星：

private drawStar(
  context: CanvasRenderingContext2D,
  centerX: number,
  centerY: number,
  radius: number,
  color: string
) {
  const path = new Path2D()
  const pointNumber = 5
  const angle = Math.PI / pointNumber
  const innerRadius = radius * Math.cos(angle) / 2
​
  for (let i = 0; i <= pointNumber * 2; i++) {
    const r = (i % 2 === 1) ? radius : innerRadius
    const omega = angle * i
​
    const x = centerX + r * Math.sin(omega)
    const y = centerY + r * Math.cos(omega)
​
    if (i === 0) {
      path.moveTo(x, y)
    } else {
      path.lineTo(x, y)
    }
  }
​
  path.closePath()
  context.fillStyle = color
  context.fill(path)
}

1.2 组件构建

在 @Entry 标记的 FiveStarsRedFlag 组件中，我们使用了 Canvas 来创建画布并在其上绘制五星红旗：

@Component
struct FiveStarsRedFlag {
  @State private animationValue: number = 0
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
​
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onReady(() => {
          this.drawFlag()
        })
    }
  }
​
  private drawFlag() {
    if (!this.context) return
​
    // 绘制红色背景
    this.context.fillStyle = '#FF0000' // 红色
    this.context.fillRect(0, 0, 300, 200)
​
    // 绘制大五角星
    this.drawStar(this.context, 50, 50, 30, '#FFFF00') // 黄色五角星
​
    // 绘制四个小五角星
    this.drawStar(this.context, 100, 20, 10, '#FFFF00')
    this.drawStar(this.context, 120, 40, 10, '#FFFF00')
    this.drawStar(this.context, 120, 70, 10, '#FFFF00')
    this.drawStar(this.context, 100, 90, 10, '#FFFF00')
  }
}

1.3 使用方法及效果展示

build() {
  RelativeContainer() {
    Text(this.message)
      .id('HelloWorld')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    FiveStarsRedFlag()
  }
  .height('100%')
  .width('100%')
}

通过 Canvas 和 CanvasRenderingContext2D，我们可以轻松实现类似于 HTML5 Canvas 的绘图效果。 是不是有手就行. 后续让五星红旗迎风飘扬的效果我将单独在出一期 ，鸿蒙动画效果的实现小伙伴们可以持续关注.