HarmonyOS开发：使用画布绘制自定义图形 (Canvas)详解

目录

• 前言
• 关于画布(Canvas)
• Canvas绘图
• 实现Canvas绘图

• 结束语

  前言

  在移动应用开发中，自定义图形的绘制是一项非常常见需求，它能够提升应用的视觉效果和用户体验，也是实际开发中比较常见的功能需求。HarmonyOS提供了强大的画布(Canvas)功能，允许鸿蒙开发者在应用中绘制各种自定义图形和动画。那么本文就来详细介绍如何在HarmonyOS应用中使用画布(Canvas)来绘制自定义图形，方便查阅使用。

  关于画布(Canvas)

  画布(Canvas)是Android和HarmonyOS中用于绘制图像的一个类，它提供了一组丰富的绘图操作，如绘制线条、矩形、圆、文本和位图等。开发者可以通过Canvas类在应用的UI层上绘制自定义图形。在鸿蒙开发中，Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

  Canvas绘图

  在HarmonyOS中，Canvas绘图涉及以下核心组件：

• Canvas：提供绘图操作的接口。
• Paint：定义绘图的颜色、样式、笔刷等属性。
• Path：表示绘图的路径，用于绘制复杂的形状。

• Matrix：用于图形的变换，如平移、旋转和缩放。

  实现Canvas绘图

  接下来就来详细介绍使用画布绘制图形的操作。

  1、初始化画布组件

  其中，onReady(event: () => void)是Canvas组件初始化完成时的事件回调，调用该事件后，可获取Canvas组件的确定宽高，进一步使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象调用相关API进行图形绘制。

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

2、画布组件绘制方式

在Canvas组件生命周期接口onReady()调用之后，开发者可以直接使用canvas组件进行绘制。或者可以脱离Canvas组件和onReady()生命周期，单独定义Path2d对象构造理想的路径，并在onReady()调用之后使用Canvas组件进行绘制。
（1）通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象直接调用相关API进行绘制。

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();
   })

（2）先单独定义path2d对象构造理想的路径，再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口或者fill接口进行绘制。

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);
  })

3、画布组件常用方法

关于画布组件常用的方法，OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供了大量的属性和方法，可以用来绘制文本、图形，处理像素等，是Canvas组件的核心。常用接口有fill（对封闭路径进行填充）、clip（设置当前路径为剪切路径）、stroke（进行边框绘制操作）等等，同时提供了fillStyle（指定绘制的填充色）、globalAlpha（设置透明度）与strokeStyle（设置描边的颜色）等属性修改绘制内容的样式。将通过以下几个方面简单介绍画布组件常见使用方法。
（1）基础形状绘制
使用基础形状绘制，可以通过arc（绘制弧线路径）、 ellipse（绘制一个椭圆）、rect（创建矩形路径）等接口绘制基础形状。具体示例代码如下所示：

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();
  })

（2）文本绘制
使用文本绘制，可以通过fillText（绘制填充类文本）、strokeText（绘制描边类文本）等接口进行文本绘制。具体示例代码如下所示：

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);
  })

（3）其他方法
其实Canvas中还提供其他类型的方法，渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等。具体示例代码如下所示：

  Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     //创建一个径向渐变色的CanvasGradient对象
     let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
     //为CanvasGradient对象设置渐变断点值，包括偏移和颜色
     grad.addColorStop(0.0, '#E87361');
     grad.addColorStop(0.5, '#FFFFF0');
     grad.addColorStop(1.0, '#BDDB69');
     //用CanvasGradient对象填充矩形
     this.context.fillStyle = grad;
     this.context.fillRect(0, 0, 400, 400);
  })

结束语

通过使用HarmonyOS中的Canvas，开发者可以灵活地在应用中绘制自定义图形和动画。本文提供的指南和代码示例可以帮助鸿蒙开发者快速上手Canvas绘图，为自己的应用添加丰富多彩的视觉效果。随着技术的不断发展，Canvas绘图将在HarmonyOS生态中扮演越来越重要的角色，为用户带来更加丰富和生动的交互体验，让我们期待Canvas绘图带来更加酷炫的动画效果。