一、ArkTS 几何绘制核心组件

Canvas 画布组件

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F1F3F5')
  .onReady(() => { /* 绘制逻辑 */ })

特性：

• 即时渲染模式：每次重绘完整路径（默认）

• 保留渲染模式：通过 context.save() 缓存绘制状态（需手动管理）

• 坐标系：左上角为原点 (0,0)，X轴向右，Y轴向下

---

🔧 二、基础几何图形绘制方法

1. 直线路径

// 绘制折线
context.beginPath()
context.moveTo(50, 10)   // 起点
context.lineTo(200, 50)  // 线段1
context.lineTo(150, 120) // 线段2
context.closePath()      // 自动闭合路径
context.stroke()         // 描边

2. 矩形绘制

// 描边矩形
context.strokeRect(50, 50, 200, 120)

// 填充矩形（带圆角）
context.fillRect(100, 100, 150, 80, 12) // 第5参数为圆角半径

3. 圆形/椭圆

// 正圆
context.arc(150, 150, 80, 0, Math.PI * 2)

// 椭圆
context.ellipse(200, 200, 100, 60, 0, 0, Math.PI * 2)

// 扇形（起始角0°, 终止角120°）
context.arc(250, 250, 70, 0, Math.PI * 2/3)
context.fill()

4. 多边形

// 六边形绘制
context.beginPath()
for (let i = 0; i < 6; i++) {
  const angle = (Math.PI / 3) * i
  const x = 180 + 60 * Math.cos(angle)
  const y = 180 + 60 * Math.sin(angle)
  context.lineTo(x, y)
}
context.closePath()
context.stroke()

---

🖌️ 三、高级样式控制

1. 描边样式

属性	方法	示例值
线宽	context.lineWidth =	5
颜色	context.strokeStyle =	'#FF007DFF'
端点样式	context.lineCap =	LineCapStyle.Round
拐角样式	context.lineJoin =	LineJoinStyle.Bevel
虚线模式	context.setLineDash()	[10, 5]

2. 填充样式

// 纯色填充
context.fillStyle = Color.Red

// 渐变填充（线性）
const gradient = context.createLinearGradient(0,0, 300,0)
gradient.addColorStop(0.0, '#FF0000')
gradient.addColorStop(1.0, '#0000FF')
context.fillStyle = gradient

3. 阴影效果

context.shadowOffsetX = 5
context.shadowOffsetY = 5
context.shadowBlur = 10
context.shadowColor = 'rgba(0,0,0,0.5)'

---

⚙️ 四、路径操作与变换

1. 路径管理

context.beginPath()    // 开始新路径
context.closePath()    // 闭合路径
context.save()         // 保存当前状态
context.restore()      // 恢复上次保存状态

2. 矩阵变换

context.translate(100, 50)  // 平移坐标系
context.rotate(Math.PI/4)   // 旋转45°
context.scale(0.8, 1.2)     // 非均匀缩放
context.transform(1, 0.5, -0.5, 1, 10, 10) // 自定义矩阵

3. 路径裁剪

// 圆形裁剪区域
context.arc(150, 150, 80, 0, Math.PI * 2)
context.clip()

// 后续绘制内容将被裁剪
context.fillRect(0, 0, 300, 300) 

---

🚀 五、性能优化技巧

1. 分层绘制
   将静态背景与动态内容分离到不同 Canvas 层：

   Stack() {
     Canvas(staticContext) // 静态层
     Canvas(dynamicContext) // 动态层
   }

2. 局部重绘
   使用 clearRect() 替代全局清除：

   context.clearRect(dirtyX, dirtyY, dirtyWidth, dirtyHeight)

3. 离屏渲染
   预渲染复杂图形：

   const offscreen = new OffscreenCanvas(300, 300)
   const ctx = offscreen.getContext('2d')
   // ...预绘制操作
   context.drawImage(offscreen, 0, 0)

---

💡 六、实战案例：仪表盘绘制

// 1. 绘制底盘
context.arc(centerX, centerY, radius, 0, Math.PI * 1.8, false)
context.lineWidth = 15
context.strokeStyle = '#E5E7EB'
context.stroke()

// 2. 绘制进度弧
context.beginPath()
context.arc(centerX, centerY, radius, 0, progressAngle)
context.strokeStyle = '#2563EB'
context.lineCap = LineCapStyle.Round
context.stroke()

// 3. 添加指针
context.translate(centerX, centerY)
context.rotate(pointerAngle)
context.fillRect(-3, -radius+10, 6, radius-20)

---

📚 七、设计规范与适配

设备类型	推荐画布尺寸	线宽范围
手机	≤ 屏幕分辨率	1-8 vp
平板	1200×800 dp	2-12 vp
智慧屏	1920×1080 dp	3-16 vp

最佳实践：

• 使用 vp 单位确保多屏适配

• 复杂图形考虑使用 SVG 替代

• 避免在 onReady 外频繁重绘