簡介這是一款基于 uni-app 與純 canvas 實(shí)現(xiàn)的跨端轉(zhuǎn)盤項(xiàng)目面向微信小程序、支付寶小程序、抖音小程序等全端開發(fā)場(chǎng)景幫助開發(fā)者免去從零造輪子直接獲得可運(yùn)行的自定義抽獎(jiǎng)/選擇轉(zhuǎn)盤。壓縮包共13個(gè)文件包含vue頁面與組件、json工程配置、js業(yè)務(wù)邏輯、scss樣式、png圖標(biāo)及readme說明文檔整體僅19KB使用 HbuilderX 導(dǎo)入即可運(yùn)行文件分工明確、結(jié)構(gòu)輕量便于快速定位和二次修改。功能方面支持輪盤轉(zhuǎn)動(dòng)、自定義轉(zhuǎn)盤選項(xiàng)、按權(quán)重抽獎(jiǎng)、轉(zhuǎn)速減速模擬真實(shí)轉(zhuǎn)動(dòng)以及選項(xiàng)顏色設(shè)置自定義選項(xiàng)支持任意數(shù)量的內(nèi)容錄入權(quán)重設(shè)置可靈活調(diào)整中獎(jiǎng)概率內(nèi)容也可自由替換既能用于線上抽獎(jiǎng)、抓鬮也能用于日常生活中的“今天吃什么”“周末去哪玩”等選擇場(chǎng)景。readme 中附有基礎(chǔ)使用說明可幫助你理解配置和擴(kuò)展方式方便快速集成到現(xiàn)有小程序項(xiàng)目。對(duì)于想學(xué)習(xí) uni-app 跨端開發(fā)或 canvas 繪圖的中初級(jí)開發(fā)者這是一套易于閱讀和改造的實(shí)用模板也可作為畢業(yè)設(shè)計(jì)或功能模塊的參考起點(diǎn)。目前已有319人學(xué)習(xí)下載。1. 純canvas轉(zhuǎn)盤uni-app小程序里最不該用插件的地方做小程序抽獎(jiǎng)轉(zhuǎn)盤很多人第一反應(yīng)是去插件市場(chǎng)找現(xiàn)成的但實(shí)際接進(jìn)來才發(fā)現(xiàn)插件體積大、樣式和業(yè)務(wù)耦合深想改個(gè)配色、加個(gè)概率控制都得看別人臉色。更重要的是轉(zhuǎn)盤的核心邏輯其實(shí)就兩件事——畫扇形和轉(zhuǎn)動(dòng)畫用canvas手寫兩百行足夠而且概率可以做到完全可控。這篇筆記要拆的就是uni-app 小程序原生canvas從零實(shí)現(xiàn)轉(zhuǎn)盤的完整過程包含繪制、動(dòng)畫、概率分配、真機(jī)兼容性排查以及封裝成組件的進(jìn)階做法。適合那些想自己掌控抽獎(jiǎng)邏輯、不想被第三方插件綁定的開發(fā)者也適合剛接觸canvas但想直接落地一個(gè)實(shí)戰(zhàn)項(xiàng)目的從業(yè)者。2. 轉(zhuǎn)盤繪制與概率模型先把canvas坐標(biāo)系和份額算清楚2.1 從角度到弧長canvas繪制轉(zhuǎn)盤的最小幾何體系canvas的坐標(biāo)系原點(diǎn)在左上角x軸向右y軸向下。這對(duì)繪制轉(zhuǎn)盤二維圓形沒有影響只要你把圓心定位在畫布中心(r, r)一切圍繞圓心轉(zhuǎn)。真正需要費(fèi)心的是角度canvas的arc方法用的是弧度制一個(gè)完整圓是2π而不是360。很多從css動(dòng)畫轉(zhuǎn)過來的同學(xué)會(huì)在這里卡住習(xí)慣性地用360 / 獎(jiǎng)品數(shù)量結(jié)果畫出來要么缺了一塊要么扇區(qū)重疊。轉(zhuǎn)盤的每個(gè)扇區(qū)本質(zhì)上是一個(gè)從startAngle到endAngle的圓弧封口扇形。假如你有 N 個(gè)獎(jiǎng)品每個(gè)獎(jiǎng)品對(duì)應(yīng)的扇區(qū)角度就是該獎(jiǎng)品權(quán)重占總權(quán)重的比例乘以2π。假設(shè)獎(jiǎng)品數(shù)組為const prizes [ { name: 一等獎(jiǎng), weight: 1 }, { name: 二等獎(jiǎng), weight: 2 }, { name: 三等獎(jiǎng), weight: 3 }, { name: 謝謝參與, weight: 4 } ]那么總權(quán)重是1 2 3 4 10“謝謝參與”的扇區(qū)角度就是4 / 10 * 2π 0.4 * 2π。這個(gè)比例直接決定了指針停在它上面的概率不要再去寫一堆if (random 0.1)之類的判斷全部交給權(quán)重?fù)Q算即可。繪制扇區(qū)時(shí)使用ctx.arc(centerX, centerY, radius, startAngle, endAngle)。但要注意arc的角度默認(rèn)是從三點(diǎn)鐘方向開始也就是0弧度對(duì)應(yīng)正右方。而轉(zhuǎn)盤的指針通常在正上方所以需要把起始角度整體偏移-π/2讓第一個(gè)扇區(qū)從十二點(diǎn)鐘方向開始。這個(gè)偏移是canvas轉(zhuǎn)盤最容易忽略的細(xì)節(jié)我見過不止一個(gè)開發(fā)者因?yàn)樯倭诉@個(gè)偏移導(dǎo)致轉(zhuǎn)盤視覺上旋轉(zhuǎn)了一個(gè)象限。2.2 權(quán)重與概率讓每個(gè)獎(jiǎng)品的中獎(jiǎng)率嚴(yán)格可控實(shí)現(xiàn)可控概率有兩種思路一種是先隨機(jī)生成角度再判斷這個(gè)角度落在哪個(gè)扇區(qū)另一種是先按權(quán)重抽出獎(jiǎng)品再反推轉(zhuǎn)盤要停的位置。后者更常用因?yàn)槟闾崆爸乐歇?jiǎng)結(jié)果可以避免前端隨機(jī)數(shù)導(dǎo)致“一等獎(jiǎng)連續(xù)中了三次”這種尷尬情況。先按權(quán)重抽獎(jiǎng)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 }邏輯很直白把總權(quán)重放在一條數(shù)軸上每次減去當(dāng)前獎(jiǎng)品的權(quán)重減到小于等于零時(shí)說明隨機(jī)數(shù)落在當(dāng)前獎(jiǎng)品的區(qū)間。這樣每個(gè)獎(jiǎng)品的中獎(jiǎng)概率嚴(yán)格等于weight / totalWeight。抽中索引后要計(jì)算轉(zhuǎn)盤最終停在哪個(gè)角度。假設(shè)指針固定在正上方即畫布坐標(biāo)系里的-π/2弧度。那么為了讓第i個(gè)扇區(qū)的中心恰好對(duì)準(zhǔn)指針需要的整體旋轉(zhuǎn)角度等于const perAngle 2 * Math.PI / totalWeight const centerAngle -Math.PI / 2 (sumWeightBefore prizes[i].weight / 2) * perAngle // 讓轉(zhuǎn)盤額外轉(zhuǎn)幾圈視覺上更自然 const extraCircles 5 Math.floor(Math.random() * 4) const targetAngle -centerAngle extraCircles * 2 * Math.PI這里的sumWeightBefore是當(dāng)前獎(jiǎng)品之前所有獎(jiǎng)品的權(quán)重之和。把centerAngle取負(fù)是因?yàn)樾D(zhuǎn)的累計(jì)值要抵消扇區(qū)原本的角度指數(shù)針最終指向扇區(qū)的中心。extraCircles指定額外轉(zhuǎn)動(dòng)的圈數(shù)通常在 5 到 8 圈之間太少顯得沒勁太多會(huì)讓人等待煩躁。這一步做完你就已經(jīng)握住了轉(zhuǎn)盤的“物理引擎”。剩下的動(dòng)畫只不過是把當(dāng)前角度從 0 平滑地過渡到targetAngle而已。3. uni-app里從零實(shí)現(xiàn)轉(zhuǎn)盤繪制、動(dòng)畫、回調(diào)用完整代碼拆給你3.1 在uni-app中創(chuàng)建canvas并適配不同屏幕uni-app 在小程序端會(huì)編譯成原生 canvas 組件所以在模板里使用canvas canvas-idprizeCanvas而不是 H5 的canvas id...。這意味著不能通過document.getElementById獲取必須使用uni.createCanvasContext(canvasId, this)。第二個(gè)參數(shù)this在 Vue 組件中不可省略否則在組件內(nèi)會(huì)找不到 canvas這是一個(gè)需要留意的小細(xì)節(jié)。canvas 的默認(rèn)尺寸是 300x150若不做適配轉(zhuǎn)盤會(huì)被壓扁。我會(huì)在data里聲明canvasSize并在onReady中根據(jù)屏幕寬度動(dòng)態(tài)計(jì)算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%是因?yàn)檗D(zhuǎn)盤周圍往往還要放按鈕和文案留一點(diǎn)安全邊距。如果你在 PC 端瀏覽器調(diào)試windowWidth可能大于 750轉(zhuǎn)盤會(huì)大得離譜這時(shí)可以加一個(gè)Math.min(width, 600)限制最大尺寸。繪圖坐標(biāo)系直接使用這個(gè)canvasSize而把它作為圓心計(jì)算基準(zhǔn)。drawWheel(0)是首次繪制傳入0表示當(dāng)前累計(jì)旋轉(zhuǎn)角度為零。注意canvas 繪制是異步的uni.createCanvasContext獲取的上下文在onReady里通常已經(jīng)可用但如果遇到偶發(fā)獲取不到的情況可以用setTimeout包一層或者調(diào)用uni.nextTick。3.2 繪制扇區(qū)與文字循環(huán)里的坐標(biāo)系變換是關(guān)鍵繪制轉(zhuǎn)盤的核心函數(shù)是drawWheel它接受一個(gè)rotation參數(shù)表示當(dāng)前累計(jì)旋轉(zhuǎn)了多少弧度。所有扇區(qū)的起始角度都要加上這個(gè)旋轉(zhuǎn)量這樣才能讓整個(gè)轉(zhuǎn)盤看起來在轉(zhuǎn)動(dòng)。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 // 繪制扇形區(qū)域 ctx.beginPath() ctx.moveTo(r, r) ctx.arc(r, r, r - 10, startAngle, endAngle) ctx.closePath() ctx.fillStyle item.color ctx.fill() // 在扇區(qū)中央繪制文字 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 }) // 繪制中心點(diǎn)綴圓 ctx.beginPath() ctx.arc(r, r, 18, 0, 2 * Math.PI) ctx.fillStyle #fff ctx.fill() ctx.draw() }這里有兩個(gè)關(guān)鍵點(diǎn)需要說明。一是扇區(qū)繪制moveTo(r, r)讓路徑從圓心開始arc繪制從圓心到圓弧的邊界closePath閉合形成扇形。r - 10是扇區(qū)的繪制半徑留出 10px 給轉(zhuǎn)盤外圈或描邊避免扇區(qū)頂?shù)?canvas 邊緣。如果你希望圓盤外圈有邊框可以額外再arc描邊。二是文字繪制save保存當(dāng)前狀態(tài)translate(r, r)把坐標(biāo)系原點(diǎn)移到圓心rotate旋轉(zhuǎn)到扇區(qū)的中心角。這時(shí)fillText的基準(zhǔn)點(diǎn)在圓心通過textAlign right讓文字在半徑方向向外對(duì)齊。fillText(name, r - 20, 5)中的r - 20是文字距離圓心的長度20 可以保證文字不貼著外邊緣5是垂直偏移用于微調(diào)文字基線。如果你的獎(jiǎng)品名稱較長比如六個(gè)字以上可以把r - 20改成r * 0.65或者手動(dòng)傳入文字大小。注意startAngle在循環(huán)中被賦值成endAngle這是為了讓每個(gè)扇區(qū)連續(xù)銜接。如果某個(gè)產(chǎn)品經(jīng)理臨時(shí)要求獎(jiǎng)品間有分隔線可以在每兩個(gè)扇區(qū)之間加一個(gè)ctx.strokeStyle #fff; ctx.stroke()但那樣需要在arc后不closePath直接描邊路徑這個(gè)細(xì)節(jié)可以根據(jù)實(shí)際需求調(diào)整。3.3 轉(zhuǎn)盤旋轉(zhuǎn)動(dòng)畫用緩動(dòng)函數(shù)控制速度和圈數(shù)動(dòng)畫的目標(biāo)是讓rotation從 0 平滑增長到targetAngle。直接線性遞增會(huì)顯得機(jī)械真實(shí)的轉(zhuǎn)盤應(yīng)該是先快后慢所以我采用一個(gè)簡單的緩動(dòng)函數(shù)easeOutQuart它的表達(dá)式是1 - Math.pow(1 - progress, 4)。這個(gè)函數(shù)的曲線是前期速度快、后期速度慢非常接近常見抽獎(jiǎng)轉(zhuǎn)盤的減速效果。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) }這里有幾個(gè)細(xì)節(jié)值得注意。首先totalFrames控制動(dòng)畫總時(shí)長。每幀間隔 16mstotalFrames 60時(shí)總時(shí)長約為 960ms加上前后偏差基本在一秒左右。如果你的產(chǎn)品經(jīng)理要求轉(zhuǎn)得更久直接把totalFrames加大到 90 或 120同時(shí)記得targetRotation中也要有足夠的整圈數(shù)來支撐這么長的時(shí)長。其次currentRotation每次都從 0 重新計(jì)算而不是在上一幀基礎(chǔ)上累加。這是因?yàn)閑ased在末期增長非常緩慢如果用currentRotation step的方式容易出現(xiàn)最后停留角度輕微抖動(dòng)。而使用targetRotation * eased可以保證最后一幀恰好等于targetRotation不會(huì)出現(xiàn)因?yàn)楦↑c(diǎn)誤差導(dǎo)致指針偏離的問題。第三setInterval的間隔 16ms 在大部分設(shè)備上接近 60fps但小程序動(dòng)畫幀算不上精確如果遇到卡頓可以看第 4 章的優(yōu)化。停止動(dòng)畫的條件是progress 1此時(shí)立即清除定時(shí)器并回調(diào)結(jié)果。在實(shí)際項(xiàng)目中你多半要把uni.showToast換成自定義彈窗并把這個(gè)回調(diào)暴露給業(yè)務(wù)層。3.4 抽獎(jiǎng)事件與結(jié)果回調(diào)把指針位置翻譯成獎(jiǎng)品抽獎(jiǎng)按鈕的click事件里調(diào)用startDraw同時(shí)要加鎖避免連點(diǎn)。上面的代碼已經(jīng)用this.isDrawing做了判斷但還有一個(gè)邊界如果用戶在動(dòng)畫還沒結(jié)束時(shí)再次點(diǎn)擊會(huì)被直接return。這雖然解決了并發(fā)問題但更好的交互是按鈕置灰或顯示“旋轉(zhuǎn)中”狀態(tài)。我會(huì)在data里增加一個(gè)disabled狀態(tài)在動(dòng)畫開始時(shí)設(shè)為true結(jié)束后再置回false。結(jié)果回調(diào)不一定都用uni.showToast更優(yōu)雅的方式是讓startDraw接收一個(gè)回調(diào)函數(shù)或者通過this.$emit拋給父組件。例如startDraw() { // ... if (progress 1) { clearInterval(this.timer) this.isDrawing false this.$emit(draw-end, prize) } }這樣頁面里只需要監(jiān)聽draw-endhandleDrawEnd就能拿到中獎(jiǎng)獎(jiǎng)品。注意如果轉(zhuǎn)盤組件里的獎(jiǎng)品配置是異步從后端接口獲取的那么繪制函數(shù)必須等待數(shù)據(jù)到達(dá)后再調(diào)用drawWheel。也就是說onReady時(shí)先檢查prizes是否為空空則只繪制一個(gè)空白圓環(huán)接口返回后重新賦值并再次drawWheel(0)否則會(huì)出現(xiàn)“看得到按鈕但轉(zhuǎn)盤空白”的僵尸狀態(tài)。此外有關(guān)概率計(jì)算的代碼可以單獨(dú)抽成一個(gè)模塊而不寫在組件內(nèi)部。因?yàn)椴煌顒?dòng)對(duì)獎(jiǎng)品概率的要求可能完全不同有的需要后端強(qiáng)制校驗(yàn)有的只要前端本地隨機(jī)。把getPrizeIndex和calcTargetRotation放到純函數(shù)文件里單元測(cè)試也會(huì)更容易寫。4. 避坑手冊(cè)canvas轉(zhuǎn)盤在小程序端最容易翻車的五個(gè)細(xì)節(jié)4.1 現(xiàn)象真機(jī)上報(bào)錯(cuò)“canvas is not defined”或“Cannot read property draw of undefined”模擬器和開發(fā)工具上轉(zhuǎn)盤正常但真機(jī)報(bào)錯(cuò)多半是ctx獲取的時(shí)機(jī)不對(duì)。uni-app 在某些安卓機(jī)型上onReady時(shí) canvas 組件尚未完全掛載立刻createCanvasContext返回的上下文是不完整的。原因canvas 是原生組件渲染優(yōu)先級(jí)與 webview 不同開發(fā)者工具里因?yàn)橥戒秩舅詻]問題但真機(jī)上原生 canvas 的初始化有異步延遲。解決不要迷信onReady。穩(wěn)妥的做法是把首次繪制放到setTimeout中比如延遲 100ms 再初始化onReady() { setTimeout(() { this.ctx uni.createCanvasContext(prizeCanvas, this) this.drawWheel(0) }, 100) }如果 100ms 后仍然失敗再排查 canvas-id 是否和頁面中其他 canvas 重名。多個(gè)頁面或組件共用同一個(gè) canvas 組件的實(shí)例時(shí)canvas-id 必須全局唯一不能只在頁面內(nèi)唯一。4.2 現(xiàn)象繪制文字后字體變模糊尤其iPhone真機(jī)字體模糊的原因不是 canvas 的問題而是ctx.font里直接用14px sans-serif在小程序端可能被縮放。iPhone 6 及以后機(jī)型都使用高倍屏如果沒有把 canvas 的物理像素對(duì)齊到屏幕像素繪制出來的文字就會(huì)發(fā)虛。原因canvas 組件的 css 尺寸和畫布內(nèi)部實(shí)際像素沒有匹配。小程序舊版 canvas 默認(rèn)把畫布尺寸設(shè)置成 css 尺寸乘以devicePixelRatio但如果你通過createCanvasContext使用其中一套坐標(biāo)系就會(huì)出現(xiàn)模糊。解決不要在大尺寸轉(zhuǎn)盤上用 14px 這么小的字盡量把文字加大到 16px 以上。同時(shí)在設(shè)置 canvas 樣式尺寸時(shí)可以在canvasSize上乘以pixelRatio并給 canvas 標(biāo)簽設(shè)置widthcanvasSize * pixelRatio、height...但這樣做對(duì)舊版 canvas 反而容易出問題。我實(shí)踐后最省心的方法是不要追求物理像素完美直接投資在字號(hào)和字重上比如ctx.font bold 18px sans-serif這樣即使有輕微縮放視覺上依然是清晰的。如果你堅(jiān)持要高清適配建議改用新版 canvas 2D 接口type2d但那會(huì)帶來更多兼容問題本章后面再討論。4.3 現(xiàn)象旋轉(zhuǎn)動(dòng)畫在部分安卓機(jī)上卡頓甚至閃屏動(dòng)畫卡頓通常不是因?yàn)閺?fù)雜繪制而是setInterval在小程序后臺(tái)或低端機(jī)上不穩(wěn)定。安卓低端機(jī)的setInterval實(shí)際間隔可能超過 30ms導(dǎo)致動(dòng)畫掉幀。原因原生 canvas 每次ctx.draw()都會(huì)觸發(fā)渲染動(dòng)畫期間每秒約 60 次重繪如果代碼里還有uni.createSelectorQuery之類的頻繁調(diào)用主線程會(huì)被占滿。解決去掉動(dòng)畫幀里的無關(guān)操作例如不要在drawWheel內(nèi)每次重新計(jì)算this.prizes的總權(quán)重把它提前到data初始化時(shí)算好并緩存。同時(shí)把setInterval換成requestAnimationFrame的封裝uni-app 全局沒有標(biāo)準(zhǔn)的requestAnimationFrame但可以通過nextFrame實(shí)現(xiàn)function nextFrame(callback) { setTimeout(callback, 16) }然后在動(dòng)畫循環(huán)里遞歸調(diào)用nextFrame而不是setInterval。這樣在頁面不可見時(shí)自動(dòng)暫停遞歸調(diào)用減少無意義的消耗。4.4 現(xiàn)象轉(zhuǎn)盤停在了按鈕的正下方而不是指針位置這是角度偏移導(dǎo)致的經(jīng)典問題。指針固定在正上方但旋轉(zhuǎn)目標(biāo)角度計(jì)算時(shí)少減了一個(gè)-Math.PI / 2的基準(zhǔn)偏移導(dǎo)致最終停的位置剛好差 90 度。原因繪制時(shí)已經(jīng)加了-Math.PI / 2作為起始偏移但計(jì)算centerAngle時(shí)沒有考慮這個(gè)偏移或者反過來重復(fù)計(jì)算。解決統(tǒng)一用“指針指向正上方”作為唯一的基準(zhǔn)。我通常會(huì)封裝一個(gè)函數(shù)計(jì)算某個(gè)獎(jiǎng)品中心的目標(biāo)旋轉(zhuǎn)角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開頭最后取負(fù)后負(fù)負(fù)得正這樣targetRotation永遠(yuǎn)是正數(shù)表示順時(shí)針轉(zhuǎn)動(dòng)。如果你希望逆時(shí)針旋轉(zhuǎn)直接改成正的centerAngle取負(fù)邏輯即可但記住扇區(qū)繪制時(shí)的角度方向也隨之變化。4.5 現(xiàn)象修改獎(jiǎng)品列表后canvas沒有刷新轉(zhuǎn)盤的獎(jiǎng)品列表如果是動(dòng)態(tài)的比如用戶參與前從后端拉取名稱和權(quán)重那么繪制時(shí)必須重置startAngle到-Math.PI / 2然后用新的獎(jiǎng)品數(shù)組重新計(jì)算。常見錯(cuò)誤是直接調(diào)用drawWheel(this.currentRotation)但currentRotation可能還保留了舊動(dòng)畫的旋轉(zhuǎn)角度導(dǎo)致兩套獎(jiǎng)品疊加在一起。原因canvas 繪制是即時(shí)的如果你不清空舊的扇區(qū)形狀還在畫布上。clearRect雖然清空了但下一次循環(huán)如果沒有從初始角度開始就會(huì)在上一次扇區(qū)結(jié)束角度基礎(chǔ)上繼續(xù)畫扇區(qū)角度越積越多。解決在setPrizes(newPrizes)方法里強(qiáng)制重置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每次計(jì)算。養(yǎng)成這個(gè)習(xí)慣后再遇到數(shù)據(jù)動(dòng)態(tài)更新只要調(diào)用setPrizes轉(zhuǎn)盤就會(huì)干凈地重繪。5. 進(jìn)階把轉(zhuǎn)盤封裝成可復(fù)用組件順便解決主題定制與性能5.1 組件化設(shè)計(jì)參數(shù)驅(qū)動(dòng)繪制轉(zhuǎn)盤做一次容易但在多個(gè)活動(dòng)頁里復(fù)用就麻煩了。我會(huì)把它封裝成一個(gè)CanvasWheel組件通過props接收獎(jiǎng)品列表、指針位置、旋轉(zhuǎn)動(dòng)畫時(shí)長通過events回傳中獎(jiǎng)結(jié)果。這樣業(yè)務(wù)頁面里只需要維護(hù)一個(gè)獎(jiǎng)品數(shù)組不用關(guān)心 canvas 的繪制細(xì)節(jié)。組件內(nèi)部的核心邏輯是監(jiān)聽prizes的深度變化自動(dòng)調(diào)用setPrizes。特別注意的是不要把prizes的默認(rèn)值寫成[]然后直接內(nèi)聯(lián)修改務(wù)必通過watch監(jiān)聽props: { prizes: { type: Array, required: true } }, watch: { prizes: { handler(newVal) { this.setPrizes(newVal) }, deep: true, immediate: true } }immediate: true讓組件在創(chuàng)建時(shí)就執(zhí)行第一次繪制不用等onReady手動(dòng)調(diào)用。配合第 3 章的setTimeout初始化就能保證按鈕出現(xiàn)前畫布已經(jīng)就緒。5.2 自定義品牌色與獎(jiǎng)品圖片默認(rèn)的純色扇區(qū)太單調(diào)。常見需求是扇區(qū)背景使用漸變色或品牌 logo 圖片。小程序 canvas 同樣支持ctx.createLinearGradient但背景圖片需要先用uni.getImageInfo拿到本地路徑再用ctx.drawImage繪制。要注意繪制圖片時(shí)如果圖片尚未緩存drawImage會(huì)靜默失敗所以我會(huì)把圖片預(yù)加載和扇形繪制分開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 }繪制時(shí)先填充色作為底色再在扇區(qū)邊界內(nèi)裁剪并繪制圖片。這里需要ctx.save()ctx.arc()ctx.clip()的組合讓圖片只出現(xiàn)在當(dāng)前扇區(qū)內(nèi)否則圖片會(huì)溢出到相鄰扇區(qū)。這個(gè)裁剪操作比直接畫圖片更可控也是自定義轉(zhuǎn)盤的高頻技巧。5.3 性能優(yōu)化離屏繪制與動(dòng)畫節(jié)流如果轉(zhuǎn)盤獎(jiǎng)品多、圖片多每幀都重新繪制所有扇區(qū)和圖片低端機(jī)會(huì)卡。常見優(yōu)化是把靜止層扇區(qū)、文字、背景圖先繪制到離屏 canvas 上動(dòng)畫時(shí)只旋轉(zhuǎn)整個(gè)離屏畫布而不是重新繪制扇區(qū)。小程序?qū)﹄x屏 canvas 的支持不如 H5 完整但可以使用同一個(gè)canvas-id配合setTransform實(shí)現(xiàn)類似效果或者在動(dòng)畫期間把drawWheel的重繪頻率降低到每秒 30 次。我個(gè)人常用的做法動(dòng)畫前把靜態(tài)扇區(qū)繪制到單獨(dú)一張 canvas 并緩存離屏數(shù)據(jù)動(dòng)畫時(shí)用ctx.drawImage把緩存繪制到主 canvas再在主 canvas 上繪制指針。這樣每幀只需要繪制一次圖片和指針繪制成本大幅下降。不過這個(gè)優(yōu)化有前提——獎(jiǎng)品數(shù)不能變化扇區(qū)角度固定。一旦獎(jiǎng)品權(quán)重變化離屏緩存必須重建。有一次我在一個(gè)抽獎(jiǎng)活動(dòng)里偷懶沒有做緩動(dòng)直接用線性動(dòng)畫結(jié)果產(chǎn)品經(jīng)理反饋“轉(zhuǎn)盤停下來的那一瞬間特別生硬”。后來我把easeOutQuart換成了更陡的easeOutQuint效果才自然。從那以后我每次做轉(zhuǎn)盤都強(qiáng)制走一遍概率計(jì)算和動(dòng)畫緩動(dòng)驗(yàn)證確認(rèn)落點(diǎn)準(zhǔn)確再交付。希望這些踩坑經(jīng)驗(yàn)?zāi)軒湍闵僮邚澛啡绻阋矞?zhǔn)備在 uni-app 小程序里落地轉(zhuǎn)盤不妨先把第 2 章的角度模型在草稿紙上推一遍再開始碼代碼多花十分鐘后面能省你好幾個(gè)小時(shí)。本文還有配套的精品資源點(diǎn)擊獲取