HarmonyOS应用《玄象》开发实战：银河渐变带：createLinearGradient 与 addColorStop 实战

阅读时长：约 17 分钟 | 难度：★★★★☆ | 篇章：第 2 篇 · 启动体验：Splash 与动画
对应源码：entry/src/main/ets/pages/SplashPage.ets中的银河渐变部分

前言

玄象项目启动页的星空背景中，"银河流光"是最具东方意境的视觉元素。这道金色光带从屏幕左上斜向右下，既不抢夺主视觉，又营造出"星河璀璨"的氛围。本篇将深入剖析玄象项目银河渐变带的实现细节：从createLinearGradient渐变方向、addColorStop颜色断点、RGBA 透明度控制，到径向渐变createRadialGradient与渐变性能优化。掌握这套渐变绘制方法论，您就能用纯代码绘制任何渐变视觉。

提示：渐变（Gradient）是 Canvas 中最高频使用的视觉技巧之一。玄象项目从启动页银河带到风水罗盘金光，渐变贯穿整个应用。

一、银河渐变带完整源码

1.1 源码全貌

// 银河效果constgradient=canvas.createLinearGradient(0,0,canvasWidth,canvasHeight*0.5);gradient.addColorStop(0,'rgba(212, 168, 67, 0)');gradient.addColorStop(0.5,'rgba(212, 168, 67, 0.05)');gradient.addColorStop(1,'rgba(212, 168, 67, 0)');canvas.fillStyle=gradient;canvas.fillRect(0,0,canvasWidth,canvasHeight*0.5);

1.2 渐变绘制三步法

玄象项目银河渐变绘制遵循"三步法"：

二、createLinearGradient 渐变方向

2.1 API 签名

createLinearGradient(x0:number,y0:number,x1:number,y1:number):CanvasGradient

渐变方向由起点到终点的向量决定。

2.2 玄象项目银河带渐变方向

createLinearGradient(0,0,canvasWidth,canvasHeight*0.5)

• 起点：(0, 0)，左上角
• 终点：(canvasWidth, canvasHeight * 0.5)，右中部

渐变向量：从左上角斜向右下方，约 30 度倾角。

2.3 渐变方向设计意图

玄象项目银河带渐变方向选择 30 度斜向，原因：

1. 视觉流动感：斜向渐变比水平渐变更有动感。
2. 东方意象：东方星空意象中的银河通常是斜向流动的。
3. 呼应太极图：太极图位于屏幕中央，斜向银河带形成视觉引导线。

三、addColorStop 颜色断点

3.1 API 签名

addColorStop(offset:number,color:string):void

3.2 玄象项目三个颜色断点

gradient.addColorStop(0,'rgba(212, 168, 67, 0)');// 起点：完全透明gradient.addColorStop(0.5,'rgba(212, 168, 67, 0.05)');// 中点：5% 透明度gradient.addColorStop(1,'rgba(212, 168, 67, 0)');// 终点：完全透明

3.3 颜色断点的对称性

玄象项目银河带颜色断点呈对称分布：

• offset 0 与 offset 1 都是 alpha 0
• offset 0.5 是 alpha 0.05

这种对称性营造"中间微亮、两端透明"的光带视觉。

3.4 alpha 透明度的 16 进制表示

玄象项目使用 RGBA 字符串表达透明度：

'rgba(212, 168, 67, 0.05)'// RGBA 格式

也可以用 8 位 16 进制格式：

'#0DD4A843'// 8 位 16 进制，前两位是 alpha

提示：玄象项目选择 RGBA 字符串，是因为addColorStop接受 CSS 颜色字符串，RGBA 格式更直观。

四、渐变填充区域

4.1 fillRect 填充矩形

canvas.fillRect(0,0,canvasWidth,canvasHeight*0.5);

玄象项目银河带填充屏幕上方 50% 的矩形区域。

4.2 渐变与填充区域的关系

渐变方向：(0,0) → (canvasWidth, 0.5 × canvasHeight) 填充区域：(0, 0) 到 (canvasWidth, 0.5 × canvasHeight) 渐变方向与填充区域对角线重合，渐变完整覆盖填充区域。

4.3 视觉效果

银河带在屏幕上方 50% 区域，从左上角到右中部呈现微弱金光。由于 alpha 极低（最高 0.05），银河带不抢夺主视觉，仅作为背景氛围。

五、createRadialGradient 径向渐变

5.1 API 签名

createRadialGradient(x0:number,y0:number,r0:number,// 内圆x1:number,y1:number,r1:number// 外圆):CanvasGradient

径向渐变从内圆向外圆扩散。

5.2 径向渐变在玄象项目的应用场景

虽然启动页未使用径向渐变，但玄象项目其他页面可用径向渐变：

// 太极图周围的光晕consthalo=canvas.createRadialGradient(cx,cy,r,cx,cy,r*1.5);halo.addColorStop(0,'rgba(212, 168, 67, 0.3)');halo.addColorStop(1,'rgba(212, 168, 67, 0)');canvas.fillStyle=halo;canvas.beginPath();canvas.arc(cx,cy,r*1.5,0,Math.PI*2);canvas.fill();

5.3 径向渐变典型用途

六、渐变性能优化

6.1 渐变对象的复用

玄象项目每次绘制都创建新的CanvasGradient对象：

constgradient=canvas.createLinearGradient(...);

如果渐变参数不变，可在aboutToAppear中创建一次，重复使用：

privategradient:CanvasGradient|null=null;aboutToAppear():void{// Canvas 尺寸已知时创建this.gradient=this.canvas.createLinearGradient(0,0,w,h);this.gradient.addColorStop(0,'rgba(212, 168, 67, 0)');// ...}

6.2 渐变区域控制

渐变填充区域越大，绘制开销越高。玄象项目银河带仅覆盖 50% 屏幕，控制了性能开销。

6.3 避免每帧重建渐变

在动画场景中，避免每帧创建新渐变对象：

// 错误：每帧创建新渐变privateanimate=()=>{constgradient=this.canvas.createLinearGradient(...);// ...requestAnimationFrame(this.animate);};// 正确：复用渐变privateanimate=()=>{this.canvas.fillStyle=this.cachedGradient;// ...};

提示：玄象项目启动页银河带是静态的，仅在onReady时绘制一次，性能无忧。

七、玄象项目渐变设计总结

7.1 渐变三步法

1. 创建渐变：createLinearGradient或createRadialGradient
2. 添加断点：addColorStop(offset, color)
3. 应用并绘制：fillStyle = gradient+fill/fillRect

7.2 渐变设计原则

九、渐变在 ArkUI 中的其他应用场景

9.1 渐变背景（linearGradient 属性）

ArkUI 的linearGradient属性可直接在组件上设置渐变背景：

Column(){Text('金色渐变背景')}.linearGradient({angle:135,colors:[{color:'#F0D078',ratio:0},{color:'#D4A843',ratio:0.5},{color:'#A07830',ratio:1}]})

9.2 渐变色文字

通过.linearGradient属性可以实现渐变色文字：

Text('玄象').fontSize(56).fontWeight(FontWeight.Bold).linearGradient({angle:135,colors:[{color:'#F0D078',ratio:0},{color:'#D4A843',ratio:1}]})

9.3 玄象项目中渐变的应用场景

十、渐变的性能优化与注意事项

10.1 渐变对象的创建开销

createLinearGradient每次调用都会创建新的 CanvasGradient 对象。在玄象项目启动页这种一次性绘制场景中无影响，但在动画循环中应避免：

// 错误：每帧创建新渐变privateanimate=()=>{constgradient=this.canvas.createLinearGradient(0,0,w,h);this.canvas.fillStyle=gradient;this.canvas.fillRect(0,0,w,h);requestAnimationFrame(this.animate);};// 正确：复用渐变对象privatecachedGradient:CanvasGradient|null=null;aboutToAppear():void{this.cachedGradient=this.canvas.createLinearGradient(0,0,w,h);this.cachedGradient.addColorStop(0,'rgba(212, 168, 67, 0)');this.cachedGradient.addColorStop(0.5,'rgba(212, 168, 67, 0.05)');this.cachedGradient.addColorStop(1,'rgba(212, 168, 67, 0)');}

10.2 渐变断点数量与性能

渐变断点（addColorStop）越多，渲染开销越大。玄象项目银河带仅使用 3 个断点，在视觉与性能间取得平衡。

十一、渐变与透明度在玄象项目中的综合应用

11.1 透明度分层

玄象项目启动页的视觉层次通过透明度分层实现：

11.2 透明度与渐变结合的视觉技巧

玄象项目使用"透明度递进"技巧营造星空的深邃感：

1. 底层：完全不透明深色背景
2. 中层：极低透明度金色渐变（银河带）
3. 上层：随机透明度星点
4. 顶层：动画淡入的太极图

11.3 渐变在玄象项目中的维护建议

维护渐变代码时，建议遵循以下规范：

玄象项目使用"透明度递进"技巧营造星空的深邃感：

1. 底层：完全不透明深色背景
2. 中层：极低透明度金色渐变（银河带）
3. 上层：随机透明度星点
4. 顶层：动画淡入的太极图

总结

本篇以玄象项目启动页银河渐变带为蓝本，深入剖析了 HarmonyOS Canvas 渐变绘制：从createLinearGradient渐变方向、addColorStop颜色断点、RGBA 透明度控制，到径向渐变createRadialGradient与渐变性能优化。掌握这套渐变绘制方法论，您就能为任何 HarmonyOS 应用打造精致的渐变视觉。

下一篇：《15 · @State fadeOpacity 淡入动画与 animation curve》，将带您深入玄象项目启动页的淡入动画实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• HarmonyOS 官方文档：createLinearGradient
• HarmonyOS 官方文档：addColorStop
• MDN Canvas Gradient：developer.mozilla.org/zh-CN/docs/Web/API/CanvasGradient
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

本文所述渐变技巧同样适用于 ArkUI 组件的linearGradient属性，不限于 Canvas 绘制。掌握 Canvas 渐变与组件渐变的异同，能帮助你在不同场景中选择最合适的实现方式。

十二、扩展阅读：渐变在其他模块中的应用

12.1 风水罗盘的径向渐变

玄象项目风水罗盘的中心光晕使用径向渐变模拟：

consthalo=canvas.createRadialGradient(cx,cy,0,cx,cy,r*0.5);halo.addColorStop(0,'rgba(212, 168, 67, 0.3)');halo.addColorStop(1,'rgba(212, 168, 67, 0)');canvas.fillStyle=halo;canvas.beginPath();canvas.arc(cx,cy,r*0.5,0,Math.PI*2);canvas.fill();

12.2 首页卡片的线性渐变

玄象项目首页金边卡片使用Styles.GOLD_GRADIENT渐变实现金色边框光泽效果，在光线下呈现金属质感，与深色背景形成鲜明对比。

12.3 渐变设计的基本原则

1. 一致性：同一应用中的渐变风格应统一
2. 克制：渐变不应过度使用，避免视觉疲劳
3. 层次：渐变透明度控制视觉层次
4. 性能：动画场景中避免每帧创建渐变对象