HarmonyOS 鸿蒙Next OffscreenCanvas绘制1/4的圆如何实现

HarmonyOS 鸿蒙Next OffscreenCanvas绘制1/4的圆如何实现 这边的需求是将一个圆分成4块扇形（经过圆心），每一个块单独绘画且填充颜色不一样。

2 回复

看下下面的这个demo

@Entry
@Component
struct CanvasExample2 {
  //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  //用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = '#00bc00';
          //绘制第一部分
          offContext.beginPath()
          //画笔到圆心
          offContext.moveTo(100, 75)
          offContext.lineTo(100 + 50, 75)
          offContext.arc(100, 75, 50, 0, Math.PI/2)
          offContext.lineTo(100, 75)
          offContext.fill();
          offContext.closePath()

          //切换填充颜色
          offContext.fillStyle = '#ff1c68b8';

          //绘制第二部分
          offContext.beginPath()
          //画笔到圆心
          offContext.moveTo(100, 75)
          offContext.lineTo(100, 75 + 50)
          offContext.arc(100, 75, 50, Math.PI/2, Math.PI)
          //回到圆心
          offContext.lineTo(100, 75)
          offContext.fill();
          offContext.closePath()

          //切换填充颜色
          offContext.fillStyle = '#ff0aadd6';

          //绘制第三部分
          offContext.beginPath()
          //画笔到圆心
          offContext.moveTo(100, 75)
          offContext.lineTo(100 - 50, 75)
          offContext.arc(100, 75, 50, Math.PI, Math.PI * 1.5)
          //回到圆心
          offContext.lineTo(100, 75)
          offContext.fill();
          offContext.closePath()

          //切换填充颜色
          offContext.fillStyle = '#ffd60aa3';

          //绘制第四部分
          offContext.beginPath()
          //画笔到圆心
          offContext.moveTo(100, 75)
          offContext.lineTo(100, 75 - 50)
          offContext.arc(100, 75, 50, Math.PI * 1.5, Math.PI * 2)
          //回到圆心
          offContext.lineTo(100, 75)
          offContext.fill();
          offContext.closePath()        
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next OffscreenCanvas绘制1/4的圆如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，使用OffscreenCanvas绘制1/4的圆可以通过CanvasRenderingContext2D的arc方法实现。以下是一个示例代码：

// 创建OffscreenCanvas对象
const offscreenCanvas = new OffscreenCanvas(200, 200);
const ctx = offscreenCanvas.getContext('2d');

// 设置画笔颜色
ctx.strokeStyle = '#000000';

// 开始绘制路径
ctx.beginPath();

// 绘制1/4的圆
ctx.arc(100, 100, 50, 0, Math.PI / 2, false);

// 绘制路径
ctx.stroke();

在这个示例中，arc方法的参数依次为：圆心x坐标、圆心y坐标、半径、起始角度、结束角度和绘制方向（false表示顺时针）。Math.PI / 2表示90度，即1/4的圆。

回到顶部