前言导读

我们在开发鸿蒙next的项目过程，是不是经常会遇到本身不存在的一些组件还有效果，这个时候我们就需要，是用我们的画布自己来绘制

我们今天要分享的是一个绘制三角形的效果

效果图：

具体代码

• 1创建我们的 context 和settings对象

private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

• 2画布绘制

  Canvas(this.context)
    .width(200)
    .height(200)
    .backgroundColor('#f0f0f0')
    .onReady(() => {
      this.context.beginPath()
      this.context.moveTo(100, 50)  // 顶点
      this.context.lineTo(50, 150)  // 左下角
      this.context.lineTo(150, 150) // 右下角
      this.context.closePath()      // 闭合路径
      this.context.stroke()         // 描边
      this.context.fillStyle = '#FF0000'
      this.context.fill()           // 填充
    })

这段代码创建了一个红色填充的三角形，顶点在(100,50)，底边两个点在(50,150)和(150,150)。你可以通过修改坐标点来改变三角形形状和位置。

完整代码

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Column() {
      Canvas(this.context)
        .width(200)
        .height(200)
        .backgroundColor('#f0f0f0')
        .onReady(() => {
          this.context.beginPath()
          this.context.moveTo(100, 50)  // 顶点
          this.context.lineTo(50, 150)  // 左下角
          this.context.lineTo(150, 150) // 右下角
          this.context.closePath()      // 闭合路径
          this.context.stroke()         // 描边
          this.context.fillStyle = '#FF0000'
          this.context.fill()           // 填充
        })
    }
    .width('100%')
    .height('100%')
  }
}

最后总结

我们使用 Canvas 组件里面来绘制 我们 onReady 回调方法里面 设置了我们的 三角形的 顶点 左下角 右下角 然后设置我们闭合路径就可以实现我们的绘制的效果

这个画布绘制的实现主要是对我们熟悉的一些逻辑要比较清楚 才比较容易理解和实现，今天的文章就到这里更新的内容同学们可以自己继续研究