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

@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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

@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 渲染上下文
}
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.

@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 渲染上下文
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

@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 渲染上下文
}
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.