HarmonyOS应用《玄象》开发实战：Canvas 太极图算法：阴阳半圆 + 鱼眼小圆的数学推导

阅读时长约 20 分钟 | 难度★★★★★ | 篇章第 2 篇 · 启动体验Splash 与动画对应源码entry/src/main/ets/pages/SplashPage.ets中的drawTaiji方法前言太极图是中华哲学的核心符号“一阴一阳之谓道”。玄象项目启动页以 Canvas 绘制的金色太极图作为视觉锚点传递玄之又玄众妙之门的品牌调性。本篇将深入剖析玄象项目drawTaiji方法的数学原理从外圈金色光环、白色半圆阳、黑色半圆阴、鱼眼小圆的算法推导到arc角度参数与坐标系的对应关系。掌握这套太极图绘制算法您就能用纯代码绘制任何复杂几何图形。提示太极图的绘制难点在于阴阳鱼眼的实现。玄象项目用 7 个 Canvas 操作精准还原了太极图的视觉精髓。一、drawTaiji 完整源码1.1 源码全貌privatedrawTaiji(canvas:CanvasRenderingContext2D,canvasWidth:number,canvasHeight:number){constcxcanvasWidth/2;constcycanvasHeight/2;constrcanvasWidth/2-10;// 1. 外圈金色光环canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth2;canvas.beginPath();canvas.arc(cx,cy,r5,0,Math.PI*2);canvas.stroke();// 2. 白色半圆阳canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cy,r,-Math.PI/2,Math.PI/2);canvas.fill();// 3. 黑色半圆阴canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cy,r,Math.PI/2,-Math.PI/2);canvas.fill();// 4. 白色小圆阳中有阴canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cy-r/2,r/2,0,Math.PI*2);canvas.fill();// 5. 黑色小圆阴中有阳canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cyr/2,r/2,0,Math.PI*2);canvas.fill();// 6. 阳中小黑点canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cy-r/2,r/6,0,Math.PI*2);canvas.fill();// 7. 阴中小金点canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cyr/2,r/6,0,Math.PI*2);canvas.fill();// 8. 装饰花纹canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth1;canvas.beginPath();canvas.arc(cx,cy,r*0.75,0,Math.PI*2);canvas.stroke();}1.2 八步绘制流程玄象项目太极图绘制分为 8 步步骤绘制内容Canvas API1外圈金色光环arcstroke2白色半圆阳arcfill3黑色半圆阴arcfill4白色小圆阳中有阴arcfill5黑色小圆阴中有阳arcfill6阳中小黑点arcfill7阴中小金点arcfill8装饰花纹arcstroke二、坐标系与几何参数2.1 Canvas 坐标系(0,0) ───────────→ x │ │ │ ↓ yCanvas 坐标系特点原点在左上角x 轴向右为正y 轴向下为正与数学坐标系相反2.2 arc 角度方向Canvasarc方法角度方向-π/2 │ │ π ◄────●────► 0 │ │ π/2角度 0指向 x 轴正方向右角度 π/2指向 y 轴正方向下角度 -π/2指向 y 轴负方向上角度 π指向 x 轴负方向左2.3 玄象项目太极图参数constcxcanvasWidth/2;// 圆心 xconstcycanvasHeight/2;// 圆心 yconstrcanvasWidth/2-10;// 太极半径圆心Canvas 几何中心半径Canvas 宽度的一半减去 10 像素边距提示玄象项目太极图 Canvas 尺寸为 220×220因此cx cy 110r 100。三、外圈金色光环3.1 绘制代码canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth2;canvas.beginPath();canvas.arc(cx,cy,r5,0,Math.PI*2);canvas.stroke();3.2 关键参数参数值含义strokeStyleColors.PRIMARY_GOLD金色描边lineWidth2描边宽度 2pxarc(cx, cy, r5, 0, 2π)圆心 (cx, cy)半径 r5完整圆外圈光环3.3 视觉效果外圈金色光环环绕太极主体营造金边镶嵌的视觉。四、白色半圆阳4.1 绘制代码canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cy,r,-Math.PI/2,Math.PI/2);canvas.fill();4.2 arc 角度参数分析canvas.arc(cx,cy,r,-Math.PI/2,Math.PI/2);起始角度-π/2指向上方结束角度π/2指向下方默认方向顺时针从上方顺时针扫过 180 度到下方覆盖右半圆。4.3 颜色选择玄象项目用#F0D078浅金色表示阳颜色含义#F0D078浅金阳#1A1A2E深蓝黑阴提示传统太极图用黑白两色。玄象项目改为浅金 深蓝黑更符合应用的金色视觉调性。五、黑色半圆阴5.1 绘制代码canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cy,r,Math.PI/2,-Math.PI/2);canvas.fill();5.2 arc 角度参数分析canvas.arc(cx,cy,r,Math.PI/2,-Math.PI/2);起始角度π/2指向下方结束角度-π/2指向上方从下方顺时针扫过 180 度到上方覆盖左半圆。5.3 绘制顺序的视觉影响玄象项目先绘制白色半圆右半再绘制黑色半圆左半。两个半圆刚好覆盖整个圆形成阴阳两半的视觉效果。六、鱼眼小圆阳中有阴6.1 绘制代码canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cy-r/2,r/2,0,Math.PI*2);canvas.fill();6.2 几何参数canvas.arc(cx,cy-r/2,r/2,0,2π);参数值含义圆心 xcx与主圆同心圆心 ycy - r/2主圆上方 r/2 处半径r/2主圆半径的一半角度0到2π完整圆6.3 鱼眼的视觉效果这个小圆位于主圆上半部分阴区域用浅金色填充视觉上咬掉了阴区域的一块形成阳鱼眼。提示鱼眼是太极图最具哲学意味的部分——“阳中有阴阴中有阳”。玄象项目用 4 个小圆两个鱼眼 两个鱼眼内的小点精准还原了这一视觉。七、鱼眼小圆阴中有阳7.1 绘制代码canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cyr/2,r/2,0,Math.PI*2);canvas.fill();7.2 几何参数参数值含义圆心 xcx与主圆同心圆心 ycy r/2主圆下方 r/2 处半径r/2主圆半径的一半这个小圆位于主圆下半部分阳区域用深蓝黑填充形成阴鱼眼。八、鱼眼内的小点8.1 阳中小黑点canvas.fillStyle#1A1A2E;canvas.beginPath();canvas.arc(cx,cy-r/2,r/6,0,Math.PI*2);canvas.fill();8.2 阴中小金点canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(cx,cyr/2,r/6,0,Math.PI*2);canvas.fill();8.3 小点几何参数小点位置圆心半径颜色阳中小黑点(cx, cy - r/2)r/6深蓝黑阴中小金点(cx, cy r/2)r/6浅金8.4 鱼眼与小点的关系鱼眼内的小点是太极图鱼眼的瞳孔阳鱼眼浅金色圆内有一个深蓝黑小点阴鱼眼深蓝黑色圆内有一个浅金小点提示小点半径r/6约为主圆半径的 1/6。这个比例是玄象项目经过多次尝试后的黄金比例既保证小点可见又不破坏鱼眼的整体性。九、装饰花纹9.1 绘制代码canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth1;canvas.beginPath();canvas.arc(cx,cy,r*0.75,0,Math.PI*2);canvas.stroke();9.2 装饰圆参数参数值含义圆心(cx, cy)与主圆同心半径r * 0.75主圆半径的 3/4描边金色1px细金线装饰花纹是太极图内部的细金圆环为太极图增加层次感。十、太极图绘制的数学总结10.1 关键数学关系元素圆心半径起止角度外圈光环(cx, cy)r 50 ~ 2π白色半圆阳(cx, cy)r-π/2 ~ π/2黑色半圆阴(cx, cy)rπ/2 ~ -π/2鱼眼小圆 1(cx, cy - r/2)r/20 ~ 2π鱼眼小圆 2(cx, cy r/2)r/20 ~ 2π阳中小黑点(cx, cy - r/2)r/60 ~ 2π阴中小金点(cx, cy r/2)r/60 ~ 2π装饰花纹(cx, cy)r * 0.750 ~ 2π10.2 设计精髓玄象项目太极图的设计精髓7 层绘制顺序从底层外圈光环到顶层鱼眼内小点精准控制视觉层级。几何对称性所有元素以(cx, cy)为对称中心。比例协调r、r/2、r/6的比例经过精心设计。提示太极图的绘制是 Canvas 几何绘制的典型范例。理解 arc 角度方向是绘制正确图形的关键。九、太极图绘制的常见问题9.1 太极图绘制的常见错误错误现象根因解决方案阴阳半圆错位arc 起始/结束角度理解错误记住 -π/2 指向上方π/2 指向下方鱼眼小圆偏离中心圆心坐标计算错误确保 cy ± r/2 正确鱼眼内小点不可见小点半径过小检查 r/6 是否大于 0.5px9.2 如何将太极图封装为可复用组件Componentexportstruct Taiji{Propsize:number220;privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatetaijiContext:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);build(){Canvas(this.taijiContext).width(this.size).height(this.size).onReady((){this.drawTaiji(this.taijiContext,this.taijiContext.width,this.taijiContext.height);})}// drawTaiji 方法复用 SplashPage 中的实现}9.3 太极图的缩放适配在不同屏幕尺寸上太极图应自适应缩放。玄象项目通过canvasWidth / 2 - 10计算半径确保在不同分辨率下都完整显示。总结本篇以玄象项目drawTaiji方法为蓝本深入剖析了 HarmonyOS Canvas 绘制太极图的算法原理从 Canvas 坐标系与 arc 角度方向、外圈金色光环、阴阳半圆、鱼眼小圆、鱼眼内小点到装饰花纹的 8 步绘制流程。掌握这套几何绘制算法您就能用纯代码绘制任何复杂图形从太极图到八卦图、从星宿图到风水罗盘。下一篇《14 · 银河渐变带createLinearGradient 与 addColorStop 实战》将带您深入玄象项目启动页星空背景中的银河渐变绘制。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档CanvasRenderingContext2D.arcMDN Canvas APICanvasRenderingContext2D.arc()太极图数学原理wikipedia.org/wiki/太极图开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net