HarmonyOS clearRect清除区域如何带圆角

private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
@Prop mWidth: number = 800
@Prop mHeight: number = 500

build() {
  Canvas(this.context).width(this.mWidth).height(this.mHeight).onReady(() => {
    this.context.fillStyle = '#80000000'
    this.context.fillRect(0, 0, this.mWidth, this.mHeight)
    this.context.clearRect(50, 50, 132, 132)
  })
}
HarmonyOS
2025-01-09 15:44:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

参考示例如下:

@Entry
@Component
struct ClearRect {
  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('#F5DC62')
        .onReady(() => {
          // 设定填充样式,填充颜色设为蓝色
          this.context.fillStyle = '#0097D4';
          // // 以(50, 50)为左上顶点,画一个宽高200的矩形
          this.context.fillRect(50, 50, 200, 200);
          // 绘制圆角矩形
          const x = 60;
          const y = 60;
          const width = 180;
          const height = 180;
          const radius = 20;
          this.context.moveTo(x + radius, y);
          this.context.lineTo(x + width - radius, y);
          this.context.arcTo(x + width, y, x + width, y + radius, radius);
          this.context.lineTo(x + width, y + height - radius);
          this.context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
          this.context.lineTo(x + radius, y + height);
          this.context.arcTo(x, y + height, x, y + height - radius, radius);
          this.context.lineTo(x, y + radius);
          this.context.arcTo(x, y, x + radius, y, radius);
          // 将绘制的路径设置为当前的剪切路径
          this.context.clip();
          // 清除矩形区域内的像素
          this.context.clearRect(x, y, width, height);
        })
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:22:04
相关问题
如何绘制圆角的矩形
674浏览 • 1回复 待解决
HarmonyOS 怎么设置圆角的渐变边框
420浏览 • 1回复 待解决
HarmonyOS如何清除应用缓存?
357浏览 • 0回复 待解决
HarmonyOS 如何清除文件内容
313浏览 • 1回复 待解决
HarmonyOS 如何清除Web缓存
264浏览 • 1回复 待解决
HarmonyOS 如何清除应用缓存
258浏览 • 1回复 待解决
HarmonyOS sdk如何清除cookie?
817浏览 • 1回复 待解决
HarmonyOS bindPopup如何去掉圆角
299浏览 • 1回复 待解决
HarmonyOS Canvas如何设置圆角
342浏览 • 1回复 待解决
flutter缓存如何清除
512浏览 • 1回复 待解决
HarmonyOS 如何清除web的localStorage
240浏览 • 1回复 待解决
HarmonyOS Web如何实现清除缓存
1020浏览 • 1回复 待解决
HarmonyOS 路径规划如何清除路线
874浏览 • 1回复 待解决
HarmonyOS bindSheet如何修改圆角大小?
583浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
742浏览 • 1回复 待解决
HarmonyOS bindSheet如何自定义圆角
591浏览 • 1回复 待解决
HarmonyOS text组件如何实现部分圆角
412浏览 • 1回复 待解决
lottile动画如何圆角
1108浏览 • 0回复 待解决
HarmonyOS 清除app缓存
382浏览 • 1回复 待解决
HarmonyOS 清除Web缓存
1085浏览 • 0回复 待解决
HarmonyOS 清除缓存功能
917浏览 • 1回复 待解决