文章目录完整示例核心点1 RenderingContextSettings 绘图设置2 CanvasRenderingContext2D 绘图上下文3 Canvas 组件绑定上下文4 onReady 绘图入口5 fillRect 绘制填充矩形CanvasRenderingContext2D 常用方法运行效果总结Canvas是 HarmonyOS 提供的自定义绘图组件通过CanvasRenderingContext2D上下文对象可在页面上绘制矩形、圆形、路径、文本、图片等自定义图形适用于图表、自定义图标、动画、涂鸦等需要动态绘图的场景。本文档围绕CanvasRenderingContext2D 绘图上下文展开讲解完整示例// xxx.ets Entry Component struct CanvasExample { 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(() { this.context.fillRect(0, 30, 100, 100) }) } .width(100%) .height(100%) } }运行效果如图核心点1 RenderingContextSettings 绘图设置private settings: RenderingContextSettings new RenderingContextSettings(true);作用创建绘图上下文配置对象参数true表示开启抗锯齿让图形更平滑用途用于初始化CanvasRenderingContext2D2 CanvasRenderingContext2D 绘图上下文private context: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings);这是2D 绘图的核心对象所有绘图方法fillRect、strokeRect、arc、drawImage 等都通过该对象调用必须绑定到Canvas组件才能生效3 Canvas 组件绑定上下文Canvas(this.context)将创建好的CanvasRenderingContext2D实例绑定到 Canvas 组件使组件具备绘图能力。4 onReady 绘图入口.onReady(() { // 绘制代码必须写在这里 })onReady是 Canvas 组件初始化完成的生命周期回调必须在回调内执行绘图操作否则会因组件未初始化完成而绘制失败官方明确规定所有绘图逻辑必须在 onReady 中执行5 fillRect 绘制填充矩形this.context.fillRect(x, y, width, height)x矩形左上角的横坐标y矩形左上角的纵坐标width矩形宽度height矩形高度示例中this.context.fillRect(0, 30, 100, 100)表示从坐标(0, 30)开始绘制一个宽 100、高 100的实心矩形。CanvasRenderingContext2D 常用方法方法作用fillRect(x,y,w,h)绘制填充矩形strokeRect(x,y,w,h)绘制矩形边框arc(x,y,r,start,end)绘制圆形/圆弧beginPath()开始绘制路径moveTo(x,y)移动绘图起点lineTo(x,y)绘制直线stroke()绘制路径边框fill()填充路径drawImage()绘制图片fillText()绘制文本运行效果Canvas 区域背景色为黄色#ffff00在左上角(0,30)位置绘制一个黑色 100×100 正方形图形抗锯齿开启边缘平滑总结CanvasRenderingContext2D是 HarmonyOS 2D 绘图核心上下文所有绘制操作依赖它RenderingContextSettings用于配置绘图环境抗锯齿onReady是官方规定的唯一绘图入口fillRect是最基础的矩形绘制方法用于快速绘制实心图形示例代码完全符合官方规范可直接运行、学习、扩展更复杂的绘图功能绘图必须在 onReady 中执行不能在 build 或其他生命周期执行CanvasRenderingContext2D 必须提前创建并传入 Canvas 组件绘图坐标以 Canvas 组件左上角为原点 (0,0)Canvas 必须设置width和height否则无法绘制高频绘制场景建议开启抗锯齿提升视觉效果如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力