HarmonyOS 怎样使用CanvasRenderingContext2D在特定形状内填充颜色

怎样使用 CanvasRenderingContext2D 在特定形状内填充颜色,如:圆角矩形 ,贝塞尔曲线和其它直线组合的区域。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu
@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%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
使用Drawing进行2d图像绘制
921浏览 • 1回复 待解决
ArkGraphics 2D都有哪些使用场景?
633浏览 • 1回复 待解决
HarmonyOS Path2D的addPath方法报错
263浏览 • 1回复 待解决
ArkGraphics 2D有什么优势?
402浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
1149浏览 • 1回复 待解决