使用畫布繪制自定義圖形（Canvas）

使用畫布組件繪制自定義圖形

可以由以下三種形式在畫布繪制自定義圖形：

初始化畫布組件

onReady(event: () => void)是Canvas組件初始化完成時(shí)的事件回調(diào)，調(diào)用該事件后，可獲取Canvas組件的確定寬高，進(jìn)一步使用CanvasRenderingContext2D對(duì)象和OffscreenCanvasRenderingContext2D對(duì)象調(diào)用相關(guān)API進(jìn)行圖形繪制。

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() => {
    this.context.fillStyle = '#0097D4';
    this.context.fillRect(50, 50, 100, 100);
  })

畫布組件繪制方式

在Canvas組件生命周期接口onReady()調(diào)用之后，開發(fā)者可以直接使用canvas組件進(jìn)行繪制?；蛘呖梢悦撾xCanvas組件和onready生命周期，單獨(dú)定義Path2d對(duì)象構(gòu)造理想的路徑，并在onready調(diào)用之后使用Canvas組件進(jìn)行繪制。

• 通過CanvasRenderingContext2D對(duì)象和OffscreenCanvasRenderingContext2D對(duì)象直接調(diào)用相關(guān)API進(jìn)行繪制。

  Canvas(this.context)
    .width('100%')
    .height('100%')
    .backgroundColor('#F5DC62')
    .onReady(() =>{
      this.context.beginPath();
      this.context.moveTo(50, 50);
      this.context.lineTo(280, 160);
      this.context.stroke();
     })

  

• 先單獨(dú)定義path2d對(duì)象構(gòu)造理想的路徑，再通過調(diào)用CanvasRenderingContext2D對(duì)象和OffscreenCanvasRenderingContext2D對(duì)象的stroke接口或者fill接口進(jìn)行繪制，具體使用可以參考Path2D對(duì)象。

  Canvas(this.context)
    .width('100%')
    .height('100%')
    .backgroundColor('#F5DC62')
    .onReady(() =>{
       let region = new Path2D();
       region.arc(100, 75, 50, 0, 6.28);
       this.context.stroke(region);
    })

  

畫布組件常用方法

OffscreenCanvasRenderingContext2D對(duì)象和CanvasRenderingContext2D對(duì)象提供了大量的屬性和方法，可以用來繪制文本、圖形，處理像素等，是Canvas組件的核心。常用接口有fill(對(duì)封閉路徑進(jìn)行填充）、clip(設(shè)置當(dāng)前路徑為剪切路徑)、stroke（進(jìn)行邊框繪制操作）等等，同時(shí)提供了fillStyle（指定繪制的填充色）、globalAlpha（設(shè)置透明度）與strokeStyle（設(shè)置描邊的顏色）等屬性修改繪制內(nèi)容的樣式。將通過以下幾個(gè)方面簡(jiǎn)單介紹畫布組件常見使用方法：

• 基礎(chǔ)形狀繪制。
  可以通過arc（繪制弧線路徑）、 ellipse（繪制一個(gè)橢圓）、rect（創(chuàng)建矩形路徑）等接口繪制基礎(chǔ)形狀。

  Canvas(this.context)
    .width('100%')
    .height('100%')
    .backgroundColor('#F5DC62')
    .onReady(() =>{
       //繪制矩形
       this.context.beginPath();
       this.context.rect(100, 50, 100, 100);
       this.context.stroke();
       //繪制圓形
       this.context.beginPath();
       this.context.arc(150, 250, 50, 0, 6.28);
       this.context.stroke();
       //繪制橢圓
       this.context.beginPath();
       this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
       this.context.stroke();
    })
  
  

  

• 文本繪制。
  可以通過fillText（繪制填充類文本）、strokeText（繪制描邊類文本）等接口進(jìn)行文本繪制。

  Canvas(this.context)
    .width('100%')
    .height('100%')
    .backgroundColor('#F5DC62')
    .onReady(() =>{
       //繪制填充類文本
       this.context.font = '50px sans-serif';
       this.context.fillText("Hello World!", 50, 100);
       //繪制描邊類文本
       this.context.font = '55px sans-serif';
       this.context.strokeText("Hello World!", 50, 150);
    })
  
  
  

  

• 繪制圖片和圖像像素信息處理。
  可以通過drawImage（圖像繪制）、putImageData（使用ImageData數(shù)據(jù)填充新的矩形區(qū)域）等接口繪制圖片，通過createImageData（創(chuàng)建新的ImageData 對(duì)象）、getPixelMap（以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建PixelMap對(duì)象）、getImageData（以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建ImageData對(duì)象）等接口進(jìn)行圖像像素信息處理。

  @Entry
  @Component
  struct GetImageData {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
   
    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#F5DC62')
          .onReady(() =>{
            // 使用drawImage接口將圖片畫在（0，0）為起點(diǎn)，寬高130的區(qū)域
            this.offContext.drawImage(this.img,0,0,130,130);
            // 使用getImageData接口，獲得canvas組件區(qū)域中，（50，50）為起點(diǎn)，寬高130范圍內(nèi)的繪制內(nèi)容
            let imagedata = this.offContext.getImageData(50,50,130,130);
            // 使用putImageData接口將得到的ImageData畫在起點(diǎn)為（150， 150）的區(qū)域中
            this.offContext.putImageData(imagedata,150,150);
            // 將離屏繪制的內(nèi)容畫到canvas組件上
            let image = this.offContext.transferToImageBitmap();
            this.context.transferFromImageBitmap(image);
          })
      }
      .width('100%')
      .height('100%')
    }
  }

  

• 其他方法。

  Canvas中還提供其他類型的方法。漸變（CanvasGradient對(duì)象）相關(guān)的方法：createLinearGradient（創(chuàng)建一個(gè)線性漸變色）、createRadialGradient（創(chuàng)建一個(gè)徑向漸變色）等。

  Canvas(this.context)
    .width('100%')
    .height('100%')
    .backgroundColor('#F5DC62')
    .onReady(() =>{
       //創(chuàng)建一個(gè)徑向漸變色的CanvasGradient對(duì)象
       let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
       //為CanvasGradient對(duì)象設(shè)置漸變斷點(diǎn)值，包括偏移和顏色
       grad.addColorStop(0.0, '#E87361');
       grad.addColorStop(0.5, '#FFFFF0');
       grad.addColorStop(1.0, '#BDDB69');
       //用CanvasGradient對(duì)象填充矩形
       this.context.fillStyle = grad;
       this.context.fillRect(0, 0, 400, 400);
    })

  

場(chǎng)景示例

• 規(guī)則基礎(chǔ)形狀繪制：

  @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(() =>{
            // 設(shè)定填充樣式，填充顏色設(shè)為藍(lán)色
            this.context.fillStyle = '#0097D4';
            // 以(50, 50)為左上頂點(diǎn)，畫一個(gè)寬高200的矩形
            this.context.fillRect(50,50,200,200);
            // 以(70, 70)為左上頂點(diǎn)，清除寬150高100的區(qū)域
            this.context.clearRect(70,70,150,100);
        })
      }
      .width('100%')
      .height('100%')
    }
  }
  
  

  

• 不規(guī)則圖形繪制。

  @Entry
  @Component
  struct Path2d {
    private settings: RenderingContextSettings = new RenderingContextSettings(true);
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  
    build() {
      Row() {
        Column() {
          Canvas(this.context)
            .width('100%')
            .height('100%')
            .backgroundColor('#F5DC62')
            .onReady(() =>{
              // 使用Path2D的接口構(gòu)造一個(gè)五邊形
              let path = new Path2D();
              path.moveTo(150, 50);
              path.lineTo(50, 150);
              path.lineTo(100, 250);
              path.lineTo(200, 250);
              path.lineTo(250, 150);
              path.closePath();
              // 設(shè)定填充色為藍(lán)色
              this.context.fillStyle = '#0097D4';
              // 使用填充的方式，將Path2D描述的五邊形繪制在canvas組件內(nèi)部
              this.context.fill(path);
            })
        }
        .width('100%')
      }
      .height('100%')
    }
  }