uni-app小程序Canvas转盘从零实现：绘制、概率控制与组件封装-北京尧图网络

简介这是一款基于 uni-app 与纯 canvas 实现的跨端转盘项目面向微信小程序、支付宝小程序、抖音小程序等全端开发场景帮助开发者免去从零造轮子直接获得可运行的自定义抽奖/选择转盘。压缩包共13个文件包含vue页面与组件、json工程配置、js业务逻辑、scss样式、png图标及readme说明文档整体仅19KB使用 HbuilderX 导入即可运行文件分工明确、结构轻量便于快速定位和二次修改。功能方面支持轮盘转动、自定义转盘选项、按权重抽奖、转速减速模拟真实转动以及选项颜色设置自定义选项支持任意数量的内容录入权重设置可灵活调整中奖概率内容也可自由替换既能用于线上抽奖、抓阄也能用于日常生活中的“今天吃什么”“周末去哪玩”等选择场景。readme 中附有基础使用说明可帮助你理解配置和扩展方式方便快速集成到现有小程序项目。对于想学习 uni-app 跨端开发或 canvas 绘图的中初级开发者这是一套易于阅读和改造的实用模板也可作为毕业设计或功能模块的参考起点。目前已有319人学习下载。1. 纯canvas转盘uni-app小程序里最不该用插件的地方做小程序抽奖转盘很多人第一反应是去插件市场找现成的但实际接进来才发现插件体积大、样式和业务耦合深想改个配色、加个概率控制都得看别人脸色。更重要的是转盘的核心逻辑其实就两件事——画扇形和转动画用canvas手写两百行足够而且概率可以做到完全可控。这篇笔记要拆的就是uni-app 小程序原生canvas从零实现转盘的完整过程包含绘制、动画、概率分配、真机兼容性排查以及封装成组件的进阶做法。适合那些想自己掌控抽奖逻辑、不想被第三方插件绑定的开发者也适合刚接触canvas但想直接落地一个实战项目的从业者。2. 转盘绘制与概率模型先把canvas坐标系和份额算清楚2.1 从角度到弧长canvas绘制转盘的最小几何体系canvas的坐标系原点在左上角x轴向右y轴向下。这对绘制转盘二维圆形没有影响只要你把圆心定位在画布中心(r, r)一切围绕圆心转。真正需要费心的是角度canvas的arc方法用的是弧度制一个完整圆是2π而不是360。很多从css动画转过来的同学会在这里卡住习惯性地用360 / 奖品数量结果画出来要么缺了一块要么扇区重叠。转盘的每个扇区本质上是一个从startAngle到endAngle的圆弧封口扇形。假如你有 N 个奖品每个奖品对应的扇区角度就是该奖品权重占总权重的比例乘以2π。假设奖品数组为const prizes [ { name: 一等奖, weight: 1 }, { name: 二等奖, weight: 2 }, { name: 三等奖, weight: 3 }, { name: 谢谢参与, weight: 4 } ]那么总权重是1 2 3 4 10“谢谢参与”的扇区角度就是4 / 10 * 2π 0.4 * 2π。这个比例直接决定了指针停在它上面的概率不要再去写一堆if (random 0.1)之类的判断全部交给权重换算即可。绘制扇区时使用ctx.arc(centerX, centerY, radius, startAngle, endAngle)。但要注意arc的角度默认是从三点钟方向开始也就是0弧度对应正右方。而转盘的指针通常在正上方所以需要把起始角度整体偏移-π/2让第一个扇区从十二点钟方向开始。这个偏移是canvas转盘最容易忽略的细节我见过不止一个开发者因为少了这个偏移导致转盘视觉上旋转了一个象限。2.2 权重与概率让每个奖品的中奖率严格可控实现可控概率有两种思路一种是先随机生成角度再判断这个角度落在哪个扇区另一种是先按权重抽出奖品再反推转盘要停的位置。后者更常用因为你提前知道中奖结果可以避免前端随机数导致“一等奖连续中了三次”这种尴尬情况。先按权重抽奖function getPrizeIndex() { const totalWeight prizes.reduce((sum, item) sum item.weight, 0) let random Math.random() * totalWeight for (let i 0; i prizes.length; i) { random - prizes[i].weight if (random 0) return i } return prizes.length - 1 }逻辑很直白把总权重放在一条数轴上每次减去当前奖品的权重减到小于等于零时说明随机数落在当前奖品的区间。这样每个奖品的中奖概率严格等于weight / totalWeight。抽中索引后要计算转盘最终停在哪个角度。假设指针固定在正上方即画布坐标系里的-π/2弧度。那么为了让第i个扇区的中心恰好对准指针需要的整体旋转角度等于const perAngle 2 * Math.PI / totalWeight const centerAngle -Math.PI / 2 (sumWeightBefore prizes[i].weight / 2) * perAngle // 让转盘额外转几圈视觉上更自然 const extraCircles 5 Math.floor(Math.random() * 4) const targetAngle -centerAngle extraCircles * 2 * Math.PI这里的sumWeightBefore是当前奖品之前所有奖品的权重之和。把centerAngle取负是因为旋转的累计值要抵消扇区原本的角度指数针最终指向扇区的中心。extraCircles指定额外转动的圈数通常在 5 到 8 圈之间太少显得没劲太多会让人等待烦躁。这一步做完你就已经握住了转盘的“物理引擎”。剩下的动画只不过是把当前角度从 0 平滑地过渡到targetAngle而已。3. uni-app里从零实现转盘绘制、动画、回调用完整代码拆给你3.1 在uni-app中创建canvas并适配不同屏幕uni-app 在小程序端会编译成原生 canvas 组件所以在模板里使用canvas canvas-idprizeCanvas而不是 H5 的canvas id...。这意味着不能通过document.getElementById获取必须使用uni.createCanvasContext(canvasId, this)。第二个参数this在 Vue 组件中不可省略否则在组件内会找不到 canvas这是一个需要留意的小细节。canvas 的默认尺寸是 300x150若不做适配转盘会被压扁。我会在data里声明canvasSize并在onReady中根据屏幕宽度动态计算canvas canvas-idprizeCanvas :stylewidth: canvasSize px;height: canvasSize px/canvasdata() { return { canvasSize: 300, ctx: null, isDrawing: false } }, onReady() { const { windowWidth } uni.getSystemInfoSync() this.canvasSize Math.floor(windowWidth * 0.8) this.ctx uni.createCanvasContext(prizeCanvas, this) this.drawWheel(0) }canvasSize取屏幕宽度的 80%是因为转盘周围往往还要放按钮和文案留一点安全边距。如果你在 PC 端浏览器调试windowWidth可能大于 750转盘会大得离谱这时可以加一个Math.min(width, 600)限制最大尺寸。绘图坐标系直接使用这个canvasSize而把它作为圆心计算基准。drawWheel(0)是首次绘制传入0表示当前累计旋转角度为零。注意canvas 绘制是异步的uni.createCanvasContext获取的上下文在onReady里通常已经可用但如果遇到偶发获取不到的情况可以用setTimeout包一层或者调用uni.nextTick。3.2 绘制扇区与文字循环里的坐标系变换是关键绘制转盘的核心函数是drawWheel它接受一个rotation参数表示当前累计旋转了多少弧度。所有扇区的起始角度都要加上这个旋转量这样才能让整个转盘看起来在转动。drawWheel(rotation) { const ctx this.ctx const r this.canvasSize / 2 ctx.clearRect(0, 0, this.canvasSize, this.canvasSize) const totalWeight this.prizes.reduce((sum, j) sum j.weight, 0) let startAngle -Math.PI / 2 rotation this.prizes.forEach((item, index) { const sliceAngle (item.weight / totalWeight) * 2 * Math.PI const endAngle startAngle sliceAngle // 绘制扇形区域 ctx.beginPath() ctx.moveTo(r, r) ctx.arc(r, r, r - 10, startAngle, endAngle) ctx.closePath() ctx.fillStyle item.color ctx.fill() // 在扇区中央绘制文字 ctx.save() ctx.translate(r, r) ctx.rotate(startAngle sliceAngle / 2) ctx.textAlign right ctx.fillStyle #fff ctx.font 14px sans-serif ctx.fillText(item.name, r - 20, 5) ctx.restore() startAngle endAngle }) // 绘制中心点缀圆 ctx.beginPath() ctx.arc(r, r, 18, 0, 2 * Math.PI) ctx.fillStyle #fff ctx.fill() ctx.draw() }这里有两个关键点需要说明。一是扇区绘制moveTo(r, r)让路径从圆心开始arc绘制从圆心到圆弧的边界closePath闭合形成扇形。r - 10是扇区的绘制半径留出 10px 给转盘外圈或描边避免扇区顶到 canvas 边缘。如果你希望圆盘外圈有边框可以额外再arc描边。二是文字绘制save保存当前状态translate(r, r)把坐标系原点移到圆心rotate旋转到扇区的中心角。这时fillText的基准点在圆心通过textAlign right让文字在半径方向向外对齐。fillText(name, r - 20, 5)中的r - 20是文字距离圆心的长度20 可以保证文字不贴着外边缘5是垂直偏移用于微调文字基线。如果你的奖品名称较长比如六个字以上可以把r - 20改成r * 0.65或者手动传入文字大小。注意startAngle在循环中被赋值成endAngle这是为了让每个扇区连续衔接。如果某个产品经理临时要求奖品间有分隔线可以在每两个扇区之间加一个ctx.strokeStyle #fff; ctx.stroke()但那样需要在arc后不closePath直接描边路径这个细节可以根据实际需求调整。3.3 转盘旋转动画用缓动函数控制速度和圈数动画的目标是让rotation从 0 平滑增长到targetAngle。直接线性递增会显得机械真实的转盘应该是先快后慢所以我采用一个简单的缓动函数easeOutQuart它的表达式是1 - Math.pow(1 - progress, 4)。这个函数的曲线是前期速度快、后期速度慢非常接近常见抽奖转盘的减速效果。startDraw() { if (this.isDrawing) return this.isDrawing true const prizeIndex this.getPrizeIndex() this.targetRotation this.calcTargetRotation(prizeIndex) this.currentRotation 0 this.animationFrame 0 this.totalFrames 60 this.timer setInterval(() { this.animationFrame const progress Math.min(this.animationFrame / this.totalFrames, 1) const eased 1 - Math.pow(1 - progress, 4) const currentRotation this.targetRotation * eased this.drawWheel(currentRotation) if (progress 1) { clearInterval(this.timer) this.isDrawing false const prize this.prizes[prizeIndex] uni.showToast({ title: prize.name, icon: none }) } }, 16) }这里有几个细节值得注意。首先totalFrames控制动画总时长。每帧间隔 16mstotalFrames 60时总时长约为 960ms加上前后偏差基本在一秒左右。如果你的产品经理要求转得更久直接把totalFrames加大到 90 或 120同时记得targetRotation中也要有足够的整圈数来支撑这么长的时长。其次currentRotation每次都从 0 重新计算而不是在上一帧基础上累加。这是因为eased在末期增长非常缓慢如果用currentRotation step的方式容易出现最后停留角度轻微抖动。而使用targetRotation * eased可以保证最后一帧恰好等于targetRotation不会出现因为浮点误差导致指针偏离的问题。第三setInterval的间隔 16ms 在大部分设备上接近 60fps但小程序动画帧算不上精确如果遇到卡顿可以看第 4 章的优化。停止动画的条件是progress 1此时立即清除定时器并回调结果。在实际项目中你多半要把uni.showToast换成自定义弹窗并把这个回调暴露给业务层。3.4 抽奖事件与结果回调把指针位置翻译成奖品抽奖按钮的click事件里调用startDraw同时要加锁避免连点。上面的代码已经用this.isDrawing做了判断但还有一个边界如果用户在动画还没结束时再次点击会被直接return。这虽然解决了并发问题但更好的交互是按钮置灰或显示“旋转中”状态。我会在data里增加一个disabled状态在动画开始时设为true结束后再置回false。结果回调不一定都用uni.showToast更优雅的方式是让startDraw接收一个回调函数或者通过this.$emit抛给父组件。例如startDraw() { // ... if (progress 1) { clearInterval(this.timer) this.isDrawing false this.$emit(draw-end, prize) } }这样页面里只需要监听draw-endhandleDrawEnd就能拿到中奖奖品。注意如果转盘组件里的奖品配置是异步从后端接口获取的那么绘制函数必须等待数据到达后再调用drawWheel。也就是说onReady时先检查prizes是否为空空则只绘制一个空白圆环接口返回后重新赋值并再次drawWheel(0)否则会出现“看得到按钮但转盘空白”的僵尸状态。此外有关概率计算的代码可以单独抽成一个模块而不写在组件内部。因为不同活动对奖品概率的要求可能完全不同有的需要后端强制校验有的只要前端本地随机。把getPrizeIndex和calcTargetRotation放到纯函数文件里单元测试也会更容易写。4. 避坑手册canvas转盘在小程序端最容易翻车的五个细节4.1 现象真机上报错“canvas is not defined”或“Cannot read property draw of undefined”模拟器和开发工具上转盘正常但真机报错多半是ctx获取的时机不对。uni-app 在某些安卓机型上onReady时 canvas 组件尚未完全挂载立刻createCanvasContext返回的上下文是不完整的。原因canvas 是原生组件渲染优先级与 webview 不同开发者工具里因为同步渲染所以没问题但真机上原生 canvas 的初始化有异步延迟。解决不要迷信onReady。稳妥的做法是把首次绘制放到setTimeout中比如延迟 100ms 再初始化onReady() { setTimeout(() { this.ctx uni.createCanvasContext(prizeCanvas, this) this.drawWheel(0) }, 100) }如果 100ms 后仍然失败再排查 canvas-id 是否和页面中其他 canvas 重名。多个页面或组件共用同一个 canvas 组件的实例时canvas-id 必须全局唯一不能只在页面内唯一。4.2 现象绘制文字后字体变模糊尤其iPhone真机字体模糊的原因不是 canvas 的问题而是ctx.font里直接用14px sans-serif在小程序端可能被缩放。iPhone 6 及以后机型都使用高倍屏如果没有把 canvas 的物理像素对齐到屏幕像素绘制出来的文字就会发虚。原因canvas 组件的 css 尺寸和画布内部实际像素没有匹配。小程序旧版 canvas 默认把画布尺寸设置成 css 尺寸乘以devicePixelRatio但如果你通过createCanvasContext使用其中一套坐标系就会出现模糊。解决不要在大尺寸转盘上用 14px 这么小的字尽量把文字加大到 16px 以上。同时在设置 canvas 样式尺寸时可以在canvasSize上乘以pixelRatio并给 canvas 标签设置widthcanvasSize * pixelRatio、height...但这样做对旧版 canvas 反而容易出问题。我实践后最省心的方法是不要追求物理像素完美直接投资在字号和字重上比如ctx.font bold 18px sans-serif这样即使有轻微缩放视觉上依然是清晰的。如果你坚持要高清适配建议改用新版 canvas 2D 接口type2d但那会带来更多兼容问题本章后面再讨论。4.3 现象旋转动画在部分安卓机上卡顿甚至闪屏动画卡顿通常不是因为复杂绘制而是setInterval在小程序后台或低端机上不稳定。安卓低端机的setInterval实际间隔可能超过 30ms导致动画掉帧。原因原生 canvas 每次ctx.draw()都会触发渲染动画期间每秒约 60 次重绘如果代码里还有uni.createSelectorQuery之类的频繁调用主线程会被占满。解决去掉动画帧里的无关操作例如不要在drawWheel内每次重新计算this.prizes的总权重把它提前到data初始化时算好并缓存。同时把setInterval换成requestAnimationFrame的封装uni-app 全局没有标准的requestAnimationFrame但可以通过nextFrame实现function nextFrame(callback) { setTimeout(callback, 16) }然后在动画循环里递归调用nextFrame而不是setInterval。这样在页面不可见时自动暂停递归调用减少无意义的消耗。4.4 现象转盘停在了按钮的正下方而不是指针位置这是角度偏移导致的经典问题。指针固定在正上方但旋转目标角度计算时少减了一个-Math.PI / 2的基准偏移导致最终停的位置刚好差 90 度。原因绘制时已经加了-Math.PI / 2作为起始偏移但计算centerAngle时没有考虑这个偏移或者反过来重复计算。解决统一用“指针指向正上方”作为唯一的基准。我通常会封装一个函数计算某个奖品中心的目标旋转角calcTargetRotation(index) { const totalWeight this.totalWeight let sumBefore 0 for (let i 0; i index; i) { sumBefore this.prizes[i].weight } const centerAngle -Math.PI / 2 (sumBefore this.prizes[index].weight / 2) * (2 * Math.PI / totalWeight) const extraCircles 5 Math.floor(Math.random() * 4) return -centerAngle extraCircles * 2 * Math.PI }注意centerAngle以-Math.PI / 2开头最后取负后负负得正这样targetRotation永远是正数表示顺时针转动。如果你希望逆时针旋转直接改成正的centerAngle取负逻辑即可但记住扇区绘制时的角度方向也随之变化。4.5 现象修改奖品列表后canvas没有刷新转盘的奖品列表如果是动态的比如用户参与前从后端拉取名称和权重那么绘制时必须重置startAngle到-Math.PI / 2然后用新的奖品数组重新计算。常见错误是直接调用drawWheel(this.currentRotation)但currentRotation可能还保留了旧动画的旋转角度导致两套奖品叠加在一起。原因canvas 绘制是即时的如果你不清空旧的扇区形状还在画布上。clearRect虽然清空了但下一次循环如果没有从初始角度开始就会在上一次扇区结束角度基础上继续画扇区角度越积越多。解决在setPrizes(newPrizes)方法里强制重置setPrizes(newPrizes) { this.prizes newPrizes const totalWeight newPrizes.reduce((sum, item) sum item.weight, 0) this.totalWeight totalWeight this.currentRotation 0 this.drawWheel(0) }并且要把totalWeight缓存起来不要在drawWheel每次计算。养成这个习惯后再遇到数据动态更新只要调用setPrizes转盘就会干净地重绘。5. 进阶把转盘封装成可复用组件顺便解决主题定制与性能5.1 组件化设计参数驱动绘制转盘做一次容易但在多个活动页里复用就麻烦了。我会把它封装成一个CanvasWheel组件通过props接收奖品列表、指针位置、旋转动画时长通过events回传中奖结果。这样业务页面里只需要维护一个奖品数组不用关心 canvas 的绘制细节。组件内部的核心逻辑是监听prizes的深度变化自动调用setPrizes。特别注意的是不要把prizes的默认值写成[]然后直接内联修改务必通过watch监听props: { prizes: { type: Array, required: true } }, watch: { prizes: { handler(newVal) { this.setPrizes(newVal) }, deep: true, immediate: true } }immediate: true让组件在创建时就执行第一次绘制不用等onReady手动调用。配合第 3 章的setTimeout初始化就能保证按钮出现前画布已经就绪。5.2 自定义品牌色与奖品图片默认的纯色扇区太单调。常见需求是扇区背景使用渐变色或品牌 logo 图片。小程序 canvas 同样支持ctx.createLinearGradient但背景图片需要先用uni.getImageInfo拿到本地路径再用ctx.drawImage绘制。要注意绘制图片时如果图片尚未缓存drawImage会静默失败所以我会把图片预加载和扇形绘制分开async preloadImages(list) { const images [] for (const item of list) { if (item.image) { const info await uni.getImageInfo({ src: item.image }) images.push(info.path) } else { images.push() } } return images }绘制时先填充色作为底色再在扇区边界内裁剪并绘制图片。这里需要ctx.save()ctx.arc()ctx.clip()的组合让图片只出现在当前扇区内否则图片会溢出到相邻扇区。这个裁剪操作比直接画图片更可控也是自定义转盘的高频技巧。5.3 性能优化离屏绘制与动画节流如果转盘奖品多、图片多每帧都重新绘制所有扇区和图片低端机会卡。常见优化是把静止层扇区、文字、背景图先绘制到离屏 canvas 上动画时只旋转整个离屏画布而不是重新绘制扇区。小程序对离屏 canvas 的支持不如 H5 完整但可以使用同一个canvas-id配合setTransform实现类似效果或者在动画期间把drawWheel的重绘频率降低到每秒 30 次。我个人常用的做法动画前把静态扇区绘制到单独一张 canvas 并缓存离屏数据动画时用ctx.drawImage把缓存绘制到主 canvas再在主 canvas 上绘制指针。这样每帧只需要绘制一次图片和指针绘制成本大幅下降。不过这个优化有前提——奖品数不能变化扇区角度固定。一旦奖品权重变化离屏缓存必须重建。有一次我在一个抽奖活动里偷懒没有做缓动直接用线性动画结果产品经理反馈“转盘停下来的那一瞬间特别生硬”。后来我把easeOutQuart换成了更陡的easeOutQuint效果才自然。从那以后我每次做转盘都强制走一遍概率计算和动画缓动验证确认落点准确再交付。希望这些踩坑经验能帮你少走弯路如果你也准备在 uni-app 小程序里落地转盘不妨先把第 2 章的角度模型在草稿纸上推一遍再开始码代码多花十分钟后面能省你好几个小时。本文还有配套的精品资源点击获取

uni-app小程序Canvas转盘从零实现：绘制、概率控制与组件封装

相关推荐

SAP公司间采购与工厂间转储：一步法、两步法与在途库存详解

Python Excel自动化生产级方案：合并单元格、公式、样式全保留

后台管理系统强制登录：index入口拦截方案与权限链路解析

更多资讯

PHP+XML生成家谱树：从模型到渲染的完整实践

阿里Coding Plan实测：OpenClaw接入TaoToken的API Key配置指南

《孤胆枪手2026》安装与性能优化指南

Java SE教学资源管理系统：JDBC+Swing毕设开发全解析

Java Swing人事管理系统源码：Swing+JDBC实现桌面端CRUD全链路

E430刷BIOS 2.5：版本确认、U盘离线刷写与避坑

今日更新

Verilog实现FPGA密码锁：矩阵键盘与状态机设计实战

数据服务监控运维实战：从指标体系到告警治理与故障排查

FreeRTOS任务通知实战详解：内核原理、API与避坑指南

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？