鸿蒙特效教程08-幸运大转盘抽奖

想飞的菜鸟

鸿蒙特效教程08-幸运大转盘抽奖

本教程将带领大家从零开始，一步步实现一个完整的转盘抽奖效果，包括界面布局、Canvas绘制、动画效果和抽奖逻辑等。

1. 需求分析与整体设计

温馨提醒：本案例有一定难度，建议先收藏起来。

在开始编码前，让我们先明确转盘抽奖的基本需求：

展示一个可旋转的奖品转盘转盘上有多个奖品区域，每个区域有不同的颜色和奖品名称点击"开始抽奖"按钮后，转盘开始旋转转盘停止后，指针指向的位置即为抽中的奖品每个奖品有不同的中奖概率

整体设计思路：

使用HarmonyOS的Canvas组件绘制转盘利用动画效果实现转盘旋转根据概率算法确定最终停止位置

2. 基础界面布局

首先，我们创建基础的页面布局，包括标题、转盘区域和结果显示。

1. @Entry
2. @Component
3. struct LuckyWheel {
4.   build() {
5.     Column() {
6.       // 标题
7.       Text('幸运大转盘')
8.         .fontSize(28)
9.         .fontWeight(FontWeight.Bold)
10.         .fontColor(Color.White)
11.         .margin({ bottom: 20 })
13.       // 抽奖结果显示
14.       Text('点击开始抽奖')
15.         .fontSize(20)
16.         .fontColor(Color.White)
17.         .backgroundColor('#1AFFFFFF')
18.         .width('90%')
19.         .textAlign(TextAlign.Center)
20.         .padding(15)
21.         .borderRadius(16)
22.         .margin({ bottom: 30 })
24.       // 转盘容器（后续会添加Canvas）
25.       Stack({ alignContent: Alignment.Center }) {
26.         // 这里稍后会添加Canvas绘制转盘
28.         // 中央开始按钮
29.         Button({ type: ButtonType.Circle }) {
30.           Text('开始\n抽奖')
31.             .fontSize(18)
32.             .fontWeight(FontWeight.Bold)
33.             .textAlign(TextAlign.Center)
34.             .fontColor(Color.White)
35.         }
36.         .width(80)
37.         .height(80)
38.         .backgroundColor('#FF6B6B')
39.       }
40.       .width('90%')
41.       .aspectRatio(1)
42.       .backgroundColor('#0DFFFFFF')
43.       .borderRadius(16)
44.       .padding(15)
45.     }
46.     .width('100%')
47.     .height('100%')
48.     .justifyContent(FlexAlign.Center)
49.     .backgroundColor(Color.Black)
50.     .linearGradient({
51.       angle: 135,
52.       colors: [
53.         ['#1A1B25', 0],
54.         ['#2D2E3A', 1]
55.       ]
56.     })
57.   }
58. }

复制代码

这个基础布局创建了一个带有标题、结果显示区和转盘容器的页面。转盘容器使用 Stack组件，这样我们可以在转盘上方放置"开始抽奖"按钮。
3. 定义数据结构

接下来，我们需要定义转盘上的奖品数据结构：

1. // 奖品数据接口
2. interface PrizesItem {
3.   name: string     // 奖品名称
4.   color: string    // 转盘颜色
5.   probability: number // 概率权重
6. }
8. @Entry
9. @Component
10. struct LuckyWheel {
11.   // 奖品数据
12.   private prizes: PrizesItem[] = [
13.     { name: '谢谢参与', color: '#FFD8A8', probability: 30 },
14.     { name: '10积分', color: '#B2F2BB', probability: 20 },
15.     { name: '5元红包', color: '#D0BFFF', probability: 10 },
16.     { name: '优惠券', color: '#A5D8FF', probability: 15 },
17.     { name: '免单券', color: '#FCCFE7', probability: 5 },
18.     { name: '50积分', color: '#BAC8FF', probability: 15 },
19.     { name: '会员月卡', color: '#99E9F2', probability: 3 },
20.     { name: '1元红包', color: '#FFBDBD', probability: 2 }
21.   ]
23.   // 状态变量
24.   @State isSpinning: boolean = false // 是否正在旋转
25.   @State rotation: number = 0 // 当前旋转角度
26.   @State result: string = '点击开始抽奖' // 抽奖结果
28.   // ...其余代码
29. }

复制代码

这里我们定义了转盘上的8个奖品，每个奖品包含名称、颜色和概率权重。同时定义了三个状态变量来跟踪转盘的状态。
4. 初始化Canvas

现在，让我们初始化Canvas来绘制转盘：

1. @Entry
2. @Component
3. struct LuckyWheel {
4.   // Canvas 相关设置
5.   private readonly settings: RenderingContextSettings = new RenderingContextSettings(true); // 启用抗锯齿
6.   private readonly ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
8.   // 转盘相关属性
9.   private canvasWidth: number = 0 // 画布宽度
10.   private canvasHeight: number = 0 // 画布高度
12.   // ...其余代码
14.   build() {
15.     Column() {
16.       // ...之前的代码
18.       // 转盘容器
19.       Stack({ alignContent: Alignment.Center }) {
20.         // 使用Canvas绘制转盘
21.         Canvas(this.ctx)
22.           .width('100%')
23.           .height('100%')
24.           .onReady(() => {
25.             // 获取Canvas尺寸
26.             this.canvasWidth = this.ctx.width
27.             this.canvasHeight = this.ctx.height
28.             // 初始绘制转盘
29.             this.drawWheel()
30.           })
32.         // 中央开始按钮
33.         // ...按钮代码
34.       }
35.       // ...容器样式
36.     }
37.     // ...外层容器样式
38.   }
40.   // 绘制转盘（先定义一个空方法，稍后实现）
41.   private drawWheel(): void {
42.     // 稍后实现
43.   }
44. }

复制代码

这里我们创建了Canvas绘制上下文，并在 onReady回调中获取Canvas尺寸，然后调用 drawWheel方法绘制转盘。
5. 实现转盘绘制

接下来，我们实现 drawWheel方法，绘制转盘：

1. // 绘制转盘
2. private drawWheel(): void {
3.   if (!this.ctx) return
5.   const centerX = this.canvasWidth / 2
6.   const centerY = this.canvasHeight / 2
7.   const radius = Math.min(centerX, centerY) * 0.85
9.   // 清除画布
10.   this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
12.   // 保存当前状态
13.   this.ctx.save()
15.   // 移动到中心点
16.   this.ctx.translate(centerX, centerY)
17.   // 应用旋转
18.   this.ctx.rotate((this.rotation % 360) * Math.PI / 180)
20.   // 绘制转盘扇形
21.   const anglePerPrize = 2 * Math.PI / this.prizes.length
22.   for (let i = 0; i < this.prizes.length; i++) {
23.     const startAngle = i * anglePerPrize
24.     const endAngle = (i + 1) * anglePerPrize
26.     this.ctx.beginPath()
27.     this.ctx.moveTo(0, 0)
28.     this.ctx.arc(0, 0, radius, startAngle, endAngle)
29.     this.ctx.closePath()
31.     // 填充扇形
32.     this.ctx.fillStyle = this.prizes[i].color
33.     this.ctx.fill()
35.     // 绘制边框
36.     this.ctx.strokeStyle = "#FFFFFF"
37.     this.ctx.lineWidth = 2
38.     this.ctx.stroke()
39.   }
41.   // 恢复状态
42.   this.ctx.restore()
43. }

复制代码

这段代码实现了基本的转盘绘制：

计算中心点和半径清除画布平移坐标系到转盘中心应用旋转角度绘制每个奖品的扇形区域

运行后，你应该能看到一个彩色的转盘，但还没有文字和指针。
6. 添加奖品文字

继续完善 drawWheel方法，添加奖品文字：

1. // 绘制转盘扇形
2. const anglePerPrize = 2 * Math.PI / this.prizes.length
3. for (let i = 0; i < this.prizes.length; i++) {
4.   // ...之前的扇形绘制代码
6.   // 绘制文字
7.   this.ctx.save()
8.   this.ctx.rotate(startAngle + anglePerPrize / 2)
9.   this.ctx.textAlign = 'center'
10.   this.ctx.textBaseline = 'middle'
11.   this.ctx.fillStyle = '#333333'
12.   this.ctx.font = '24px sans-serif'
14.   // 旋转文字，使其可读性更好
15.   // 第一象限和第四象限的文字需要额外旋转180度，保证文字朝向
16.   const needRotate = (i >= this.prizes.length / 4) && (i < this.prizes.length * 3 / 4)
17.   if (needRotate) {
18.     this.ctx.rotate(Math.PI)
19.     this.ctx.fillText(this.prizes[i].name, -radius * 0.6, 0, radius * 0.5)
20.   } else {
21.     this.ctx.fillText(this.prizes[i].name, radius * 0.6, 0, radius * 0.5)
22.   }
24.   this.ctx.restore()
25. }

复制代码

这里我们在每个扇形区域添加了奖品文字，并根据位置进行适当旋转，确保文字朝向正确，提高可读性。
7. 添加中心圆盘和指针

继续完善 drawWheel方法，添加中心圆盘和指针：

1. // 恢复状态
2. this.ctx.restore()
4. // 绘制中心圆盘
5. this.ctx.beginPath()
6. this.ctx.arc(centerX, centerY, radius * 0.2, 0, 2 * Math.PI)
7. this.ctx.fillStyle = '#FF8787'
8. this.ctx.fill()
9. this.ctx.strokeStyle = '#FFFFFF'
10. this.ctx.lineWidth = 3
11. this.ctx.stroke()
13. // 绘制指针 - 固定在顶部中央
14. this.ctx.beginPath()
15. // 三角形指针
16. this.ctx.moveTo(centerX, centerY - radius - 10)
17. this.ctx.lineTo(centerX - 15, centerY - radius * 0.8)
18. this.ctx.lineTo(centerX + 15, centerY - radius * 0.8)
19. this.ctx.closePath()
20. this.ctx.fillStyle = '#FF6B6B'
21. this.ctx.fill()
22. this.ctx.strokeStyle = '#FFFFFF'
23. this.ctx.lineWidth = 2
24. this.ctx.stroke()
26. // 绘制中心文字
27. this.ctx.textAlign = 'center'
28. this.ctx.textBaseline = 'middle'
29. this.ctx.fillStyle = '#FFFFFF'
30. this.ctx.font = '18px sans-serif'
32. // 绘制两行文字
33. this.ctx.fillText('开始', centerX, centerY - 10)
34. this.ctx.fillText('抽奖', centerX, centerY + 10)

复制代码

这段代码添加了：

中心的红色圆盘顶部的三角形指针中心的"开始抽奖"文字

现在转盘的静态部分已经完成。下一步，我们将实现转盘的旋转动画。
8. 实现抽奖逻辑

在实现转盘旋转前，我们需要先实现抽奖逻辑，决定最终奖品：

1. // 生成随机目标索引(基于概率权重)
2. private generateTargetIndex(): number {
3.   const weights = this.prizes.map(prize => prize.probability)
4.   const totalWeight = weights.reduce((a, b) => a + b, 0)
5.   const random = Math.random() * totalWeight
7.   let currentWeight = 0
8.   for (let i = 0; i < weights.length; i++) {
9.     currentWeight += weights[i]
10.     if (random < currentWeight) {
11.       return i
12.     }
13.   }
14.   return 0
15. }

复制代码

这个方法根据每个奖品的概率权重生成一个随机索引，概率越高的奖品被选中的机会越大。
9. 实现转盘旋转

现在，让我们实现转盘旋转的核心逻辑：

1. // 转盘属性
2. private spinDuration: number = 4000 // 旋转持续时间(毫秒)
3. private targetIndex: number = 0 // 目标奖品索引
4. private spinTimer: number = 0 // 旋转定时器
6. // 开始抽奖
7. private startSpin(): void {
8.   if (this.isSpinning) return
10.   this.isSpinning = true
11.   this.result = '抽奖中...'
13.   // 生成目标奖品索引
14.   this.targetIndex = this.generateTargetIndex()
16.   console.info(`抽中奖品索引: ${this.targetIndex}, 名称: ${this.prizes[this.targetIndex].name}`)
18.   // 计算目标角度
19.   // 每个奖品占据的角度 = 360 / 奖品数量
20.   const anglePerPrize = 360 / this.prizes.length
22.   // 因为Canvas中0度是在右侧，顺时针旋转，而指针在顶部(270度位置)
23.   // 所以需要将奖品旋转到270度位置对应的角度
24.   // 目标奖品中心点的角度 = 索引 * 每份角度 + 半份角度
25.   const prizeAngle = this.targetIndex * anglePerPrize + anglePerPrize / 2
27.   // 需要旋转到270度位置的角度 = 270 - 奖品角度
28.   // 但由于旋转方向是顺时针，所以需要计算为正向旋转角度
29.   const targetAngle = (270 - prizeAngle + 360) % 360
31.   // 获取当前角度的标准化值(0-360范围内)
32.   const currentRotation = this.rotation % 360
34.   // 计算从当前位置到目标位置需要旋转的角度(确保是顺时针旋转)
35.   let deltaAngle = targetAngle - currentRotation
36.   if (deltaAngle  {
37.     const elapsed = Date.now() - startTime
39.     if (elapsed >= this.spinDuration) {
40.       // 动画结束
41.       clearInterval(this.spinTimer)
42.       this.spinTimer = 0
43.       this.rotation = finalRotation
44.       this.drawWheel()
45.       this.isSpinning = false
46.       this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
47.       return
48.     }
50.     // 使用easeOutExpo效果：慢慢减速
51.     const progress = this.easeOutExpo(elapsed / this.spinDuration)
52.     this.rotation = initialRotation + progress * (finalRotation - initialRotation)
54.     // 重绘转盘
55.     this.drawWheel()
56.   }, 16) // 大约60fps的刷新率
57. }
59. // 缓动函数：指数减速
60. private easeOutExpo(t: number): number {
61.   return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
62. }

复制代码

这段代码实现了转盘旋转的核心逻辑：

根据概率生成目标奖品计算目标奖品对应的角度计算需要旋转的总角度（多转几圈再停在目标位置）使用定时器实现转盘的平滑旋转使用缓动函数实现转盘的减速效果旋转结束后显示中奖结果

10. 连接按钮点击事件

现在我们需要将"开始抽奖"按钮与 startSpin方法连接起来：

1. // 中央开始按钮
2. Button({ type: ButtonType.Circle }) {
3.   Text('开始\n抽奖')
4.     .fontSize(18)
5.     .fontWeight(FontWeight.Bold)
6.     .textAlign(TextAlign.Center)
7.     .fontColor(Color.White)
8. }
9. .width(80)
10. .height(80)
11. .backgroundColor('#FF6B6B')
12. .onClick(() => this.startSpin())
13. .enabled(!this.isSpinning)
14. .stateEffect(true) // 启用点击效果

复制代码

这里我们给按钮添加了 onClick事件处理器，点击按钮时调用 startSpin方法。同时使用 enabled属性确保在转盘旋转过程中按钮不可点击。
11. 添加资源释放

为了防止内存泄漏，我们需要在页面销毁时清理定时器：

1. aboutToDisappear() {
2.   // 清理定时器
3.   if (this.spinTimer !== 0) {
4.     clearInterval(this.spinTimer)
5.     this.spinTimer = 0
6.   }
7. }

复制代码

12. 添加底部概率说明(可选)

最后，我们在页面底部添加奖品概率说明：

1. // 底部说明
2. Text('奖品说明：概率从高到低排序')
3.   .fontSize(14)
4.   .fontColor(Color.White)
5.   .opacity(0.7)
6.   .margin({ top: 20 })
8. // 概率说明
9. Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
10.   ForEach(this.prizes, (prize: PrizesItem, index) => {
11.     Text(`${prize.name}: ${prize.probability}%`)
12.       .fontSize(12)
13.       .fontColor(Color.White)
14.       .backgroundColor(prize.color)
15.       .borderRadius(12)
16.       .padding({
17.         left: 10,
18.         right: 10,
19.         top: 4,
20.         bottom: 4
21.       })
22.       .margin(4)
23.   })
24. }
25. .width('90%')
26. .margin({ top: 10 })

复制代码

这段代码在页面底部添加了奖品概率说明，直观展示各个奖品的中奖概率。
13. 美化优化

为了让转盘更加美观，我们可以进一步优化转盘的视觉效果：

1. // 绘制转盘
2. private drawWheel(): void {
3.   // ...之前的代码
5.   // 绘制转盘外圆边框
6.   this.ctx.beginPath()
7.   this.ctx.arc(centerX, centerY, radius + 5, 0, 2 * Math.PI)
8.   this.ctx.fillStyle = '#2A2A2A'
9.   this.ctx.fill()
10.   this.ctx.strokeStyle = '#FFD700' // 金色边框
11.   this.ctx.lineWidth = 3
12.   this.ctx.stroke()
14.   // ...其余绘制代码
16.   // 给指针添加渐变色和阴影
17.   let pointerGradient = this.ctx.createLinearGradient(
18.     centerX, centerY - radius - 15,
19.     centerX, centerY - radius * 0.8
20.   )
21.   pointerGradient.addColorStop(0, '#FF0000')
22.   pointerGradient.addColorStop(1, '#FF6666')
23.   this.ctx.fillStyle = pointerGradient
24.   this.ctx.fill()
26.   this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
27.   this.ctx.shadowBlur = 5
28.   this.ctx.shadowOffsetX = 2
29.   this.ctx.shadowOffsetY = 2
31.   // ...其余代码
32. }

复制代码

完整代码

以下是完整的实现代码：

1. interface PrizesItem {
2.   name: string // 奖品名称
3.   color: string // 转盘颜色
4.   probability: number // 概率权重
5. }
7. @Entry
8. @Component
9. struct Index {
10.   // Canvas 相关设置
11.   private readonly settings: RenderingContextSettings = new RenderingContextSettings(true); // 启用抗锯齿
12.   private readonly ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
13.   // 奖品数据
14.   private prizes: PrizesItem[] = [
15.     { name: '谢谢参与', color: '#FFD8A8', probability: 30 },
16.     { name: '10积分', color: '#B2F2BB', probability: 20 },
17.     { name: '5元红包', color: '#D0BFFF', probability: 1 },
18.     { name: '优惠券', color: '#A5D8FF', probability: 15 },
19.     { name: '免单券', color: '#FCCFE7', probability: 5 },
20.     { name: '50积分', color: '#BAC8FF', probability: 15 },
21.     { name: '会员月卡', color: '#99E9F2', probability: 3 },
22.     { name: '1元红包', color: '#FFBDBD', probability: 2 }
23.   ]
24.   // 转盘属性
25.   @State isSpinning: boolean = false // 是否正在旋转
26.   @State rotation: number = 0 // 当前旋转角度
27.   @State result: string = '点击开始抽奖' // 抽奖结果
28.   private spinDuration: number = 4000 // 旋转持续时间(毫秒)
29.   private targetIndex: number = 0 // 目标奖品索引
30.   private spinTimer: number = 0 // 旋转定时器
31.   private canvasWidth: number = 0 // 画布宽度
32.   private canvasHeight: number = 0 // 画布高度
34.   // 生成随机目标索引(基于概率权重)
35.   private generateTargetIndex(): number {
36.     const weights = this.prizes.map(prize => prize.probability)
37.     const totalWeight = weights.reduce((a, b) => a + b, 0)
38.     const random = Math.random() * totalWeight
40.     let currentWeight = 0
41.     for (let i = 0; i < weights.length; i++) {
42.       currentWeight += weights[i]
43.       if (random < currentWeight) {
44.         return i
45.       }
46.     }
47.     return 0
48.   }
50.   // 开始抽奖
51.   private startSpin(): void {
52.     if (this.isSpinning) {
53.       return
54.     }
56.     this.isSpinning = true
57.     this.result = '抽奖中...'
59.     // 生成目标奖品索引
60.     this.targetIndex = this.generateTargetIndex()
62.     console.info(`抽中奖品索引: ${this.targetIndex}, 名称: ${this.prizes[this.targetIndex].name}`)
64.     // 计算目标角度
65.     // 每个奖品占据的角度 = 360 / 奖品数量
66.     const anglePerPrize = 360 / this.prizes.length
68.     // 因为Canvas中0度是在右侧，顺时针旋转，而指针在顶部(270度位置)
69.     // 所以需要将奖品旋转到270度位置对应的角度
70.     // 目标奖品中心点的角度 = 索引 * 每份角度 + 半份角度
71.     const prizeAngle = this.targetIndex * anglePerPrize + anglePerPrize / 2
73.     // 需要旋转到270度位置的角度 = 270 - 奖品角度
74.     // 但由于旋转方向是顺时针，所以需要计算为正向旋转角度
75.     const targetAngle = (270 - prizeAngle + 360) % 360
77.     // 获取当前角度的标准化值(0-360范围内)
78.     const currentRotation = this.rotation % 360
80.     // 计算从当前位置到目标位置需要旋转的角度(确保是顺时针旋转)
81.     let deltaAngle = targetAngle - currentRotation
82.     if (deltaAngle  {
83.       const elapsed = Date.now() - startTime
85.       if (elapsed >= this.spinDuration) {
86.         // 动画结束
87.         clearInterval(this.spinTimer)
88.         this.spinTimer = 0
89.         this.rotation = finalRotation
90.         this.drawWheel()
91.         this.isSpinning = false
92.         this.result = `恭喜获得: ${this.prizes[this.targetIndex].name}`
93.         return
94.       }
96.       // 使用easeOutExpo效果：慢慢减速
97.       const progress = this.easeOutExpo(elapsed / this.spinDuration)
98.       this.rotation = initialRotation + progress * (finalRotation - initialRotation)
100.       // 重绘转盘
101.       this.drawWheel()
102.     }, 16) // 大约60fps的刷新率
103.   }
105.   // 缓动函数：指数减速
106.   private easeOutExpo(t: number): number {
107.     return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
108.   }
110.   // 绘制转盘
111.   private drawWheel(): void {
112.     if (!this.ctx) {
113.       return
114.     }
116.     const centerX = this.canvasWidth / 2
117.     const centerY = this.canvasHeight / 2
118.     const radius = Math.min(centerX, centerY) * 0.85
120.     // 清除画布
121.     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
123.     // 保存当前状态
124.     this.ctx.save()
126.     // 移动到中心点
127.     this.ctx.translate(centerX, centerY)
128.     // 应用旋转
129.     this.ctx.rotate((this.rotation % 360) * Math.PI / 180)
131.     // 绘制转盘扇形
132.     const anglePerPrize = 2 * Math.PI / this.prizes.length
133.     for (let i = 0; i < this.prizes.length; i++) {
134.       const startAngle = i * anglePerPrize
135.       const endAngle = (i + 1) * anglePerPrize
137.       this.ctx.beginPath()
138.       this.ctx.moveTo(0, 0)
139.       this.ctx.arc(0, 0, radius, startAngle, endAngle)
140.       this.ctx.closePath()
142.       // 填充扇形
143.       this.ctx.fillStyle = this.prizes[i].color
144.       this.ctx.fill()
146.       // 绘制边框
147.       this.ctx.strokeStyle = "#FFFFFF"
148.       this.ctx.lineWidth = 2
149.       this.ctx.stroke()
151.       // 绘制文字
152.       this.ctx.save()
153.       this.ctx.rotate(startAngle + anglePerPrize / 2)
154.       this.ctx.textAlign = 'center'
155.       this.ctx.textBaseline = 'middle'
156.       this.ctx.fillStyle = '#333333'
157.       this.ctx.font = '30px'
159.       // 旋转文字，使其可读性更好
160.       // 第一象限和第四象限的文字需要额外旋转180度，保证文字朝向
161.       const needRotate = (i >= this.prizes.length / 4) && (i < this.prizes.length * 3 / 4)
162.       if (needRotate) {
163.         this.ctx.rotate(Math.PI)
164.         this.ctx.fillText(this.prizes[i].name, -radius * 0.6, 0, radius * 0.5)
165.       } else {
166.         this.ctx.fillText(this.prizes[i].name, radius * 0.6, 0, radius * 0.5)
167.       }
169.       this.ctx.restore()
170.     }
172.     // 恢复状态
173.     this.ctx.restore()
175.     // 绘制中心圆盘
176.     this.ctx.beginPath()
177.     this.ctx.arc(centerX, centerY, radius * 0.2, 0, 2 * Math.PI)
178.     this.ctx.fillStyle = '#FF8787'
179.     this.ctx.fill()
180.     this.ctx.strokeStyle = '#FFFFFF'
181.     this.ctx.lineWidth = 3
182.     this.ctx.stroke()
184.     // 绘制指针 - 固定在顶部中央
185.     this.ctx.beginPath()
186.     // 三角形指针
187.     this.ctx.moveTo(centerX, centerY - radius - 10)
188.     this.ctx.lineTo(centerX - 15, centerY - radius * 0.8)
189.     this.ctx.lineTo(centerX + 15, centerY - radius * 0.8)
190.     this.ctx.closePath()
191.     this.ctx.fillStyle = '#FF6B6B'
192.     this.ctx.fill()
193.     this.ctx.strokeStyle = '#FFFFFF'
194.     this.ctx.lineWidth = 2
195.     this.ctx.stroke()
197.     // 绘制中心文字
198.     this.ctx.textAlign = 'center'
199.     this.ctx.textBaseline = 'middle'
200.     this.ctx.fillStyle = '#FFFFFF'
201.     this.ctx.font = '18px sans-serif'
203.     // 绘制两行文字
204.     this.ctx.fillText('开始', centerX, centerY - 10)
205.     this.ctx.fillText('抽奖', centerX, centerY + 10)
206.   }
208.   aboutToDisappear() {
209.     // 清理定时器
210.     if (this.spinTimer !== 0) {
211.       clearInterval(this.spinTimer) // 改成 clearInterval
212.       this.spinTimer = 0
213.     }
214.   }
216.   build() {
217.     Column() {
218.       // 标题
219.       Text('幸运大转盘')
220.         .fontSize(28)
221.         .fontWeight(FontWeight.Bold)
222.         .fontColor(Color.White)
223.         .margin({ bottom: 20 })
225.       // 抽奖结果显示
226.       Text(this.result)
227.         .fontSize(20)
228.         .fontColor(Color.White)
229.         .backgroundColor('#1AFFFFFF')
230.         .width('90%')
231.         .textAlign(TextAlign.Center)
232.         .padding(15)
233.         .borderRadius(16)
234.         .margin({ bottom: 30 })
236.       // 转盘容器
237.       Stack({ alignContent: Alignment.Center }) {
238.         // 使用Canvas绘制转盘
239.         Canvas(this.ctx)
240.           .width('100%')
241.           .height('100%')
242.           .onReady(() => {
243.             // 获取Canvas尺寸
244.             this.canvasWidth = this.ctx.width
245.             this.canvasHeight = this.ctx.height
246.             // 初始绘制转盘
247.             this.drawWheel()
248.           })
250.         // 中央开始按钮
251.         Button({ type: ButtonType.Circle }) {
252.           Text('开始\n抽奖')
253.             .fontSize(18)
254.             .fontWeight(FontWeight.Bold)
255.             .textAlign(TextAlign.Center)
256.             .fontColor(Color.White)
257.         }
258.         .width(80)
259.         .height(80)
260.         .backgroundColor('#FF6B6B')
261.         .onClick(() => this.startSpin())
262.         .enabled(!this.isSpinning)
263.         .stateEffect(true) // 启用点击效果
264.       }
265.       .width('90%')
266.       .aspectRatio(1)
267.       .backgroundColor('#0DFFFFFF')
268.       .borderRadius(16)
269.       .padding(15)
271.       // 底部说明
272.       Text('奖品概率说明')
273.         .fontSize(14)
274.         .fontColor(Color.White)
275.         .opacity(0.7)
276.         .margin({ top: 20 })
278.       // 概率说明
279.       Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
280.         ForEach(this.prizes, (prize: PrizesItem) => {
281.           Text(`${prize.name}: ${prize.probability}%`)
282.             .fontSize(12)
283.             .fontColor(Color.White)
284.             .backgroundColor(prize.color)
285.             .borderRadius(12)
286.             .padding({
287.               left: 10,
288.               right: 10,
289.               top: 4,
290.               bottom: 4
291.             })
292.             .margin(4)
293.         })
294.       }
295.       .width('90%')
296.       .margin({ top: 10 })
297.     }
298.     .width('100%')
299.     .height('100%')
300.     .justifyContent(FlexAlign.Center)
301.     .backgroundColor(Color.Black)
302.     .linearGradient({
303.       angle: 135,
304.       colors: [
305.         ['#1A1B25', 0],
306.         ['#2D2E3A', 1]
307.       ]
308.     })
309.     .expandSafeArea()
310.   }
311. }

复制代码

总结

本教程对 Canvas 的使用有一定难度，建议先点赞收藏。

这个幸运大转盘效果包含以下知识点：

使用Canvas绘制转盘，支持自定义奖品数量和概率平滑的旋转动画和减速效果基于概率权重的抽奖算法美观的UI设计和交互效果

在实际应用中，你还可以进一步扩展这个组件：

添加音效实现3D效果添加中奖历史记录连接后端API获取真实抽奖结果添加抽奖次数限制

希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的点赞、评论、收藏。