ArkTS Canvas绘图：2D图形与动画效果开发实战

ArkTS Canvas绘图：2D图形与动画效果开发实战

【免费下载链接】harmonyos-tutorial HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》 项目地址: https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial

在HarmonyOS应用开发中，Canvas（画布）组件是实现自定义图形绘制和复杂动画效果的核心工具。本文将通过实战案例，带您掌握ArkTS中Canvas 2D绘图的基础用法、高级特性及动画实现技巧，帮助您轻松构建视觉丰富的应用界面。

Canvas组件基础架构

Canvas组件通过RenderingContext（渲染上下文）实现绘图能力，支持像素级图形操作。在ArkTS中，典型的Canvas初始化流程如下：

// 初始化渲染设置
private renderingContextSettings: RenderingContextSettings = new RenderingContextSettings(true)
// 创建2D渲染上下文
private canvasRenderingContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingContextSettings)

build() {
  Canvas(this.canvasRenderingContext2D)
    .width('100%')
    .height('100%')
    .onReady(() => {
      // 绘图逻辑在初始化完成后执行
    })
}

核心文件路径：

• 基础绘图示例：samples/ArkUICanvasComponents/entry/src/main/ets/pages/Index.ets
• 动画集成示例：samples/ArkUIThirdPartyLibrary/entry/src/main/ets/view/OuterComponent.ets

2D图形绘制核心技术

基础图形绘制

Canvas支持矩形、路径、文本等基本图形绘制。以下代码展示如何绘制填充矩形、贝塞尔曲线和渐变图形：

// 绘制填充矩形 (x, y, width, height)
this.canvasRenderingContext2D.fillRect(0, 30, 100, 100)

// 绘制贝塞尔曲线
this.canvasRenderingContext2D.beginPath()
this.canvasRenderingContext2D.moveTo(170, 10)  // 起点
this.canvasRenderingContext2D.bezierCurveTo(20, 100, 200, 100, 200, 20)  // 控制点1, 控制点2, 终点
this.canvasRenderingContext2D.stroke()  // 描边绘制

渐变与颜色应用

通过创建线性渐变对象，可实现丰富的色彩过渡效果：

// 创建线性渐变 (起点x, 起点y, 终点x, 终点y)
let grad = this.canvasRenderingContext2D.createLinearGradient(150, 0, 300, 100)
grad.addColorStop(0.0, 'red')    // 渐变起始色
grad.addColorStop(0.5, 'white')  // 渐变中间色
grad.addColorStop(1.0, 'green')  // 渐变结束色
this.canvasRenderingContext2D.fillStyle = grad  // 应用渐变
this.canvasRenderingContext2D.fillRect(200, 0, 100, 100)  // 绘制渐变矩形

动画效果实现方案

基于定时器的帧动画

通过requestAnimationFrame实现平滑动画，适用于简单的位移动画：

private animateCircle() {
  let x = 50, y = 50, radius = 30
  const animate = () => {
    this.canvasRenderingContext2D.clearRect(0, 0, 300, 300)  // 清除画布
    this.canvasRenderingContext2D.beginPath()
    this.canvasRenderingContext2D.arc(x++, y, radius, 0, Math.PI * 2)  // 绘制圆形
    this.canvasRenderingContext2D.fill()
    if (x < 250) requestAnimationFrame(animate)  // 循环动画
  }
  animate()
}

Lottie动画集成

对于复杂动画，可集成Lottie动画库实现高质量矢量动画：

import lottie from '@ohos/lottieETS'

// 加载Lottie动画
this.animateItem = lottie.loadAnimation({
  container: this.renderingContext,  // 绑定Canvas上下文
  renderer: 'canvas',                // 使用Canvas渲染
  loop: 10,                          // 循环次数
  autoplay: true,                    // 自动播放
  path: 'common/lottie/data.json'    // 动画数据路径
})

// 控制动画
lottie.play()   // 播放
lottie.pause()  // 暂停
lottie.destroy()// 销毁

实战案例：交互式动画画板

结合上述技术，可构建一个支持绘制和动画的交互画板。核心功能包括：

1. Canvas区域配置：

Canvas(this.renderingContext)
  .width(300)
  .aspectRatio(1.76)  // 宽高比控制
  .backgroundImage($r('app.media.canvasBg'))
  .onReady(() => {
    // 初始化绘图环境
  })

2. 交互控制按钮：

Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  Button('开始').onClick(() => lottie.play())
  Button('暂停').onClick(() => lottie.pause())
  Button('重置').onClick(() => {
    this.canvasRenderingContext2D.clearRect(0, 0, 300, 300)
  })
}

性能优化策略

1. 减少画布重绘区域：使用clearRect(x, y, width, height)精确清除需要更新的区域，避免全画布重绘。

2. 复用渲染上下文：将CanvasRenderingContext2D实例声明为组件成员变量，避免频繁创建销毁：

// 推荐：在组件内声明上下文
private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)

3. 合理使用离屏绘制：复杂场景下可先在离屏Canvas绘制，再一次性绘制到主画布。

总结与扩展

通过Canvas组件，HarmonyOS开发者可轻松实现从简单图形到复杂动画的各类视觉效果。结合第三方动画库如Lottie，能进一步提升动画质量和开发效率。建议深入学习以下资源：

• 官方组件文档：Canvas组件开发指南
• 高级动画示例：Lottie集成案例
• 社区教程：README.md

掌握Canvas绘图技术，将为您的HarmonyOS应用增添更具吸引力的视觉体验。立即动手实践，开启自定义图形开发之旅！

本文配套示例代码已同步至仓库，可通过以下命令获取完整项目： git clone https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial

【免费下载链接】harmonyos-tutorial HarmonyOS Tutorial. 《跟老卫学HarmonyOS开发》 项目地址: https://gitcode.com/GitHub_Trending/ha/harmonyos-tutorial