HarmonyOS Canvas绘制贝塞尔曲线,如何填充内部颜色

HarmonyOS
2024-12-24 16:21:53
930浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

图形绘制完毕添加 this.context.fill() 即可填充颜色,可参考如下demo:

@Entry
@Component
struct BezierCurveTo {
  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)
        .backgroundColor('#ffff00')
        .width('100%')
        .height('100%')
        .onReady(() => {
          this.context.strokeStyle = "#333"
          this.context.fillStyle = '#ffe514d0'
          this.context.lineWidth = 2
          this.context.beginPath()
          this.context.moveTo(30, 30)
          this.context.lineTo(30, 150)
          this.context.lineTo(100, 150)
          this.context.lineTo(100, 80)
          this.context.bezierCurveTo(75, 20, 75, 20, 30, 30)
          this.context.stroke()

          this.context.fill()
          this.context.beginPath()
          this.context.moveTo(100, 80)
          this.context.lineTo(100, 150)
          this.context.lineTo(150, 150)
          this.context.lineTo(150, 120)
          this.context.bezierCurveTo(130, 90, 160, 30, 100, 80)
          this.context.stroke()
          this.context.fillStyle = '#ff1f7fe5'
          this.context.fill()
        })
    }
    .width('100%')
    .height('100%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
分享
微博
QQ
微信
回复
2024-12-24 17:45:59


相关问题
HarmonyOS 曲线绘制
945浏览 • 1回复 待解决
arkUI怎么绘制三段曲线
281浏览 • 1回复 待解决
有没有实现曲线的相关库?
726浏览 • 1回复 待解决
HarmonyOS Canvas绘制曲线相关
754浏览 • 1回复 待解决
HarmonyOS 绘制圆滑折线或绘制曲线
786浏览 • 1回复 待解决
HarmonyOS 地图绘制曲线的点击
559浏览 • 1回复 待解决
HarmonyOS Image组件如何设置填充颜色
908浏览 • 1回复 待解决
如何操作canvas重新绘制
1877浏览 • 1回复 待解决
HarmonyOS Canvas绘制内容如何更新
613浏览 • 1回复 待解决
HarmonyOS 如何使用canvas绘制虚线
602浏览 • 1回复 待解决
HarmonyOS Canvas绘制圆角
890浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
2770浏览 • 1回复 待解决
HarmonyOS canvas如何绘制成图片导出
701浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
1225浏览 • 1回复 待解决