鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：CanvasGradient）_arkts语言颜色渐变

作者：一键难忘520 | 2024-08-17 12:19:40

踩

arkts语言颜色渐变

渐变对象。

说明：

从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

addColorStop

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

设置渐变断点值，包括偏移和颜色。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数	类型	必填	默认值	描述
offset	number	是	0	设置渐变点距离起点的位置占总体长度的比例，范围为0到1。
color	string	是	'#ffffff'	设置渐变的颜色。颜色格式参考ResourceColor中string类型说明

示例：


// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
build() {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .backgroundColor('#ffff00')
      .onReady(() => {
        let grad = this.context.createLinearGradient(50, 0, 300, 100)
        grad.addColorStop(0.0, '#ff0000')
        grad.addColorStop(0.5, '#ffffff')
        grad.addColorStop(1.0, '#00ff00')
        this.context.fillStyle = grad
        this.context.fillRect(0, 0, 400, 400)
      })
  }
  .width('100%')
  .height('100%')
}
}

zh-cn_image_0000001194032516

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料