HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（九）

最新推荐文章于 2024-09-22 00:23:07 发布

李洋-蛟龙腾飞公司

最新推荐文章于 2024-09-22 00:23:07 发布

阅读量250

点赞数

分类专栏： HarmonyOS/OpenHarmony开发学习分享文章标签： html 前端 HarmonyOS

本文链接：https://blog.csdn.net/weixin_69135651/article/details/129881469

版权

HarmonyOS/OpenHarmony开发学习分享专栏收录该内容

462 篇文章 22 订阅

订阅专栏

文章展示了如何在Ets环境中使用CanvasRenderingContext2D的fillRect方法填充矩形，以及strokeRect方法绘制矩形边框。两个方法分别用于填充和描边，示例代码详细说明了它们的参数和用法。

摘要由CSDN通过智能技术生成

fillRect strokeRect
fillRect
fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
参数：

示例：

// xxx.ets
@Entry
@Component
struct FillRect {
  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%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.fillRect(0,30,100,100)
       })
      }
    .width('100%')
    .height('100%')
  }
}

效果

strokeRect
strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。
参数：

示例：

// xxx.ets
@Entry
@Component
struct StrokeRect {
  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%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.strokeRect(30, 30, 200, 150)
      })
    }
    .width('100%')
    .height('100%')
  }
}

效果