绘制语音消息，仿聊天软件，语音消息的绘制。

const CANVAS_POS_X1: number = 0; 
const CANVAS_POS_Y1: number = 0; 
const CANVAS_POS_X2: number = 119; 
const CANVAS_POS_Y2: number = 18; 
const START_POS_X: number = 117; 
const OFFSET_X: number = 4.5; 
const RECT_WIDTH: number = 1.5; 
const TWO: number = 2; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State volumeList: number[] = new Array(27).fill(0); 
  canvasTimer: number = -1; 
  renderingContextSettings: RenderingContextSettings = new RenderingContextSettings(true); 
  canvasRenderingContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingContextSettings); 
  
  build() { 
    Row() { 
      Canvas(this.canvasRenderingContext2D) 
        .width(CANVAS_POS_X2) 
        .height(18) 
        .backgroundColor(Color.White) 
        .onReady(() => { 
          this.canvasRenderingContext2D.strokeStyle = 
          getContext().resourceManager.getColorSync($r('sys.color.ohos_id_color_text_primary_contrary')); 
          this.canvasRenderingContext2D.lineWidth = RECT_WIDTH; 
          this.canvasRenderingContext2D.lineCap = 'round'; 
          this.refreshVolumeList(); 
        }) 
  
    } 
    .backgroundColor('#4d5e55') 
    .justifyContent(FlexAlign.Center) 
    .alignItems(VerticalAlign.Center) 
    .width('100%') 
    .height(80) 
  } 
  
  refreshVolumeList() { 
    this.canvasTimer = setInterval(() => { 
      this.volumeList.shift(); 
      this.volumeList.push(8  + 10 * Math.random()); 
      this.draw(); 
    }, 70); 
  } 
  
  draw() { 
    this.canvasRenderingContext2D.clearRect(CANVAS_POS_X1, CANVAS_POS_Y1, CANVAS_POS_X2, CANVAS_POS_Y2); 
    for (let index = 0; index < this.volumeList.length; index++) { 
      const element = this.volumeList[index]; 
      if(element === 0) {      continue;    } 
      const posX = START_POS_X - (OFFSET_X * index); 
      const posY = (18 - element) / TWO; 
      this.canvasRenderingContext2D.beginPath(); 
      this.canvasRenderingContext2D.moveTo(posX, posY); 
      this.canvasRenderingContext2D.lineTo(posX, posY + element); 
      this.canvasRenderingContext2D.stroke(); 
    } 
  } 
  
  aboutToAppear() { 
    clearInterval(this.canvasTimer) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.