当前位置：首页 > article >正文

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

article 2024/11/6 16:10:33

在鸿蒙应用开发中，Canvas 组件不仅用于基础绘图，还提供了处理复杂路径和渐变效果的多种手段，帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。

在这里插入图片描述

关键词

Canvas 组件
复杂路径绘制
渐变填充

一、Canvas 的复杂路径绘制

Canvas 提供了 bezierCurveTo 和 quadraticCurveTo 等方法，允许开发者绘制复杂的贝塞尔曲线路径，并实现流畅的弧形、曲线效果。

1.1 绘制贝塞尔曲线

贝塞尔曲线适用于绘制平滑、自然的曲线路径，广泛应用于动画和复杂图形的设计中。

@Entry
@Component
struct BezierCurveExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
          this.context.strokeStyle = '#8A2BE2'; // 设置曲线颜色为紫色
          this.context.lineWidth = 3; // 设置曲线宽度

          this.context.beginPath(); // 开始新路径
          this.context.moveTo(50, 250); // 移动到起点 (50, 250)
          // 使用贝塞尔曲线方法，控制点和终点设置
          this.context.bezierCurveTo(150, 50, 350, 450, 450, 250); // 绘制贝塞尔曲线
          this.context.stroke(); // 绘制路径
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例：在画布上绘制一条弧形的贝塞尔曲线，颜色为紫色。

1.2 绘制二次曲线

二次贝塞尔曲线使用一个控制点，适合绘制较为简单的曲线。

@Entry
@Component
struct QuadraticCurveExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
          this.context.strokeStyle = '#FF1493'; // 设置曲线颜色为粉红色
          this.context.lineWidth = 3; // 设置曲线宽度

          this.context.beginPath(); // 开始新路径
          this.context.moveTo(50, 300); // 移动到起点 (50, 300)
          // 使用二次曲线方法，控制点和终点设置
          this.context.quadraticCurveTo(250, 50, 450, 300); // 绘制二次曲线
          this.context.stroke(); // 绘制路径
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例：在画布上绘制一条粉红色的二次曲线，呈现较为柔和的弧形。

二、渐变填充效果

Canvas 提供了线性渐变和径向渐变效果，可以让图形填充颜色更为丰富。通过 createLinearGradient 和 createRadialGradient 方法，开发者可以轻松实现渐变效果。

2.1 线性渐变

以下代码展示了如何在 Canvas 中绘制一个具有线性渐变效果的矩形。

@Entry
@Component
struct LinearGradientExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
          const gradient = this.context.createLinearGradient(50, 50, 450, 50); // 创建线性渐变对象
          gradient.addColorStop(0, '#FF0000'); // 渐变起始色为红色
          gradient.addColorStop(1, '#0000FF'); // 渐变结束色为蓝色

          this.context.fillStyle = gradient; // 应用渐变颜色
          this.context.fillRect(50, 200, 400, 200); // 绘制矩形
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例：一个矩形从左至右呈现由红色到蓝色的线性渐变效果。

2.2 径向渐变

径向渐变可以让颜色从一个圆形区域向外扩散，适合应用于按钮背景、光晕等效果。

@Entry
@Component
struct RadialGradientExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
          const gradient = this.context.createRadialGradient(300, 300, 50, 300, 300, 200); // 创建径向渐变对象
          gradient.addColorStop(0, '#FFD700'); // 渐变中心颜色为金色
          gradient.addColorStop(1, '#FF4500'); // 渐变外围颜色为橙红色

          this.context.fillStyle = gradient; // 应用渐变颜色
          this.context.beginPath(); // 开始新路径
          this.context.arc(300, 300, 200, 0, 2 * Math.PI); // 绘制圆形填充
          this.context.fill(); // 填充圆形
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}