簡(jiǎn)介這是一款基于 uni-app 與純 canvas 實(shí)現(xiàn)的跨端轉(zhuǎn)盤項(xiàng)目面向微信小程序、支付寶小程序、抖音小程序等全端開(kāi)發(fā)場(chǎng)景幫助開(kāi)發(fā)者免去從零造輪子直接獲得可運(yùn)行的自定義抽獎(jiǎng)/選擇轉(zhuǎn)盤。壓縮包共13個(gè)文件包含vue頁(yè)面與組件、json工程配置、js業(yè)務(wù)邏輯、scss樣式、png圖標(biāo)及readme說(shuō)明文檔整體僅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ǔ)使用說(shuō)明可幫助你理解配置和擴(kuò)展方式方便快速集成到現(xiàn)有小程序項(xiàng)目。對(duì)于想學(xué)習(xí) uni-app 跨端開(kāi)發(fā)或 canvas 繪圖的中初級(jí)開(kāi)發(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)來(lái)才發(fā)現(xiàn)插件體積大、樣式和業(yè)務(wù)耦合深想改個(gè)配色、加個(gè)概率控制都得看別人臉色。更重要的是轉(zhuǎn)盤的核心邏輯其實(shí)就兩件事——畫扇形和轉(zhuǎn)動(dòng)畫用canvas手寫兩百行足夠而且概率可以做到完全可控。這篇筆記要拆的就是uni-app 小程序原生canvas從零實(shí)現(xiàn)轉(zhuǎn)盤的完整過(guò)程包含繪制、動(dòng)畫、概率分配、真機(jī)兼容性排查以及封裝成組件的進(jìn)階做法。適合那些想自己掌控抽獎(jiǎng)邏輯、不想被第三方插件綁定的開(kāi)發(fā)者也適合剛接觸canvas但想直接落地一個(gè)實(shí)戰(zhàn)項(xiàng)目的從業(yè)者。2. 轉(zhuǎn)盤繪制與概率模型先把canvas坐標(biāo)系和份額算清楚2.1 從角度到弧長(zhǎng)canvas繪制轉(zhuǎn)盤的最小幾何體系canvas的坐標(biāo)系原點(diǎn)在左上角x軸向右y軸向下。這對(duì)繪制轉(zhuǎn)盤二維圓形沒(méi)有影響只要你把圓心定位在畫布中心(r, r)一切圍繞圓心轉(zhuǎn)。真正需要費(fèi)心的是角度canvas的arc方法用的是弧度制一個(gè)完整圓是2π而不是360。很多從css動(dòng)畫轉(zhuǎn)過(guò)來(lái)的同學(xué)會(huì)在這里卡住習(xí)慣性地用360 / 獎(jiǎng)品數(shù)量結(jié)果畫出來(lái)要么缺了一塊要么扇區(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)鐘方向開(kāi)始也就是0弧度對(duì)應(yīng)正右方。而轉(zhuǎn)盤的指針通常在正上方所以需要把起始角度整體偏移-π/2讓第一個(gè)扇區(qū)從十二點(diǎn)鐘方向開(kāi)始。這個(gè)偏移是canvas轉(zhuǎn)盤最容易忽略的細(xì)節(jié)我見(jiàn)過(guò)不止一個(gè)開(kāi)發(fā)者因?yàn)樯倭诉@個(gè)偏移導(dǎo)致轉(zhuǎn)盤視覺(jué)上旋轉(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í)說(shuō)明隨機(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)幾圈視覺(jué)上更自然 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 圈之間太少顯得沒(méi)勁太多會(huì)讓人等待煩躁。這一步做完你就已經(jīng)握住了轉(zhuǎn)盤的“物理引擎”。剩下的動(dòng)畫只不過(guò)是把當(dāng)前角度從 0 平滑地過(guò)渡到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...。這意味著不能通過(guò)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)盤看起來(lái)在轉(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)需要說(shuō)明。一是扇區(qū)繪制moveTo(r, r)讓路徑從圓心開(kāi)始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)在圓心通過(guò)textAlign right讓文字在半徑方向向外對(duì)齊。fillText(name, r - 20, 5)中的r - 20是文字距離圓心的長(zhǎng)度20 可以保證文字不貼著外邊緣5是垂直偏移用于微調(diào)文字基線。如果你的獎(jiǎng)品名稱較長(zhǎng)比如六個(gè)字以上可以把r - 20改成r * 0.65或者手動(dòng)傳入文字大小。注意startAngle在循環(huán)中被賦值成endAngle這是為了讓每個(gè)扇區(qū)連續(xù)銜接。如果某個(gè)產(chǎn)品經(jīng)理臨時(shí)要求獎(jiǎng)品間有分隔線可以在每?jī)蓚€(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 平滑增長(zhǎng)到targetAngle。直接線性遞增會(huì)顯得機(jī)械真實(shí)的轉(zhuǎn)盤應(yīng)該是先快后慢所以我采用一個(gè)簡(jiǎn)單的緩動(dòng)函數(shù)easeOutQuart它的表達(dá)式是1 - Math.pow(1 - progress, 4)。這個(gè)函數(shù)的曲線是前期速度快、后期速度慢非常接近常見(jiàn)抽獎(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í)長(zhǎng)。每幀間隔 16mstotalFrames 60時(shí)總時(shí)長(zhǎng)約為 960ms加上前后偏差基本在一秒左右。如果你的產(chǎn)品經(jīng)理要求轉(zhuǎn)得更久直接把totalFrames加大到 90 或 120同時(shí)記得targetRotation中也要有足夠的整圈數(shù)來(lái)支撐這么長(zhǎng)的時(shí)長(zhǎng)。其次currentRotation每次都從 0 重新計(jì)算而不是在上一幀基礎(chǔ)上累加。這是因?yàn)閑ased在末期增長(zhǎng)非常緩慢如果用currentRotation step的方式容易出現(xiàn)最后停留角度輕微抖動(dòng)。而使用targetRotation * eased可以保證最后一幀恰好等于targetRotation不會(huì)出現(xiàn)因?yàn)楦↑c(diǎn)誤差導(dǎo)致指針偏離的問(wèn)題。第三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)畫還沒(méi)結(jié)束時(shí)再次點(diǎn)擊會(huì)被直接return。這雖然解決了并發(fā)問(wèn)題但更好的交互是按鈕置灰或顯示“旋轉(zhuǎn)中”狀態(tài)。我會(huì)在data里增加一個(gè)disabled狀態(tài)在動(dòng)畫開(kāi)始時(shí)設(shè)為true結(jié)束后再置回false。結(jié)果回調(diào)不一定都用uni.showToast更優(yōu)雅的方式是讓startDraw接收一個(gè)回調(diào)函數(shù)或者通過(guò)this.$emit拋給父組件。例如startDraw() { // ... if (progress 1) { clearInterval(this.timer) this.isDrawing false this.$emit(draw-end, prize) } }這樣頁(yè)面里只需要監(jiān)聽(tīng)draw-endhandleDrawEnd就能拿到中獎(jiǎng)獎(jiǎng)品。注意如果轉(zhuǎn)盤組件里的獎(jiǎng)品配置是異步從后端接口獲取的那么繪制函數(shù)必須等待數(shù)據(jù)到達(dá)后再調(diào)用drawWheel。也就是說(shuō)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”模擬器和開(kāi)發(fā)工具上轉(zhuǎn)盤正常但真機(jī)報(bào)錯(cuò)多半是ctx獲取的時(shí)機(jī)不對(duì)。uni-app 在某些安卓機(jī)型上onReady時(shí) canvas 組件尚未完全掛載立刻createCanvasContext返回的上下文是不完整的。原因canvas 是原生組件渲染優(yōu)先級(jí)與 webview 不同開(kāi)發(fā)者工具里因?yàn)橥戒秩舅詻](méi)問(wèn)題但真機(jī)上原生 canvas 的初始化有異步延遲。解決不要迷信onReady。穩(wěn)妥的做法是把首次繪制放到setTimeout中比如延遲 100ms 再初始化onReady() { setTimeout(() { this.ctx uni.createCanvasContext(prizeCanvas, this) this.drawWheel(0) }, 100) }如果 100ms 后仍然失敗再排查 canvas-id 是否和頁(yè)面中其他 canvas 重名。多個(gè)頁(yè)面或組件共用同一個(gè) canvas 組件的實(shí)例時(shí)canvas-id 必須全局唯一不能只在頁(yè)面內(nèi)唯一。4.2 現(xiàn)象繪制文字后字體變模糊尤其iPhone真機(jī)字體模糊的原因不是 canvas 的問(wèn)題而是ctx.font里直接用14px sans-serif在小程序端可能被縮放。iPhone 6 及以后機(jī)型都使用高倍屏如果沒(méi)有把 canvas 的物理像素對(duì)齊到屏幕像素繪制出來(lái)的文字就會(huì)發(fā)虛。原因canvas 組件的 css 尺寸和畫布內(nèi)部實(shí)際像素沒(méi)有匹配。小程序舊版 canvas 默認(rèn)把畫布尺寸設(shè)置成 css 尺寸乘以devicePixelRatio但如果你通過(guò)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 反而容易出問(wèn)題。我實(shí)踐后最省心的方法是不要追求物理像素完美直接投資在字號(hào)和字重上比如ctx.font bold 18px sans-serif這樣即使有輕微縮放視覺(jué)上依然是清晰的。如果你堅(jiān)持要高清適配建議改用新版 canvas 2D 接口type2d但那會(huì)帶來(lái)更多兼容問(wèn)題本章后面再討論。4.3 現(xiàn)象旋轉(zhuǎn)動(dòng)畫在部分安卓機(jī)上卡頓甚至閃屏動(dòng)畫卡頓通常不是因?yàn)閺?fù)雜繪制而是setInterval在小程序后臺(tái)或低端機(jī)上不穩(wěn)定。安卓低端機(jī)的setInterval實(shí)際間隔可能超過(guò) 30ms導(dǎo)致動(dòng)畫掉幀。原因原生 canvas 每次ctx.draw()都會(huì)觸發(fā)渲染動(dòng)畫期間每秒約 60 次重繪如果代碼里還有uni.createSelectorQuery之類的頻繁調(diào)用主線程會(huì)被占滿。解決去掉動(dòng)畫幀里的無(wú)關(guān)操作例如不要在drawWheel內(nèi)每次重新計(jì)算this.prizes的總權(quán)重把它提前到data初始化時(shí)算好并緩存。同時(shí)把setInterval換成requestAnimationFrame的封裝uni-app 全局沒(méi)有標(biāo)準(zhǔn)的requestAnimationFrame但可以通過(guò)nextFrame實(shí)現(xiàn)function nextFrame(callback) { setTimeout(callback, 16) }然后在動(dòng)畫循環(huán)里遞歸調(diào)用nextFrame而不是setInterval。這樣在頁(yè)面不可見(jiàn)時(shí)自動(dòng)暫停遞歸調(diào)用減少無(wú)意義的消耗。4.4 現(xiàn)象轉(zhuǎn)盤停在了按鈕的正下方而不是指針位置這是角度偏移導(dǎo)致的經(jīng)典問(wèn)題。指針固定在正上方但旋轉(zhuǎn)目標(biāo)角度計(jì)算時(shí)少減了一個(gè)-Math.PI / 2的基準(zhǔn)偏移導(dǎo)致最終停的位置剛好差 90 度。原因繪制時(shí)已經(jīng)加了-Math.PI / 2作為起始偏移但計(jì)算centerAngle時(shí)沒(méi)有考慮這個(gè)偏移或者反過(guò)來(lái)重復(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開(kāi)頭最后取負(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沒(méi)有刷新轉(zhuǎn)盤的獎(jiǎng)品列表如果是動(dòng)態(tài)的比如用戶參與前從后端拉取名稱和權(quán)重那么繪制時(shí)必須重置startAngle到-Math.PI / 2然后用新的獎(jiǎng)品數(shù)組重新計(jì)算。常見(jiàn)錯(cuò)誤是直接調(diào)用drawWheel(this.currentRotation)但currentRotation可能還保留了舊動(dòng)畫的旋轉(zhuǎn)角度導(dǎo)致兩套獎(jiǎng)品疊加在一起。原因canvas 繪制是即時(shí)的如果你不清空舊的扇區(qū)形狀還在畫布上。clearRect雖然清空了但下一次循環(huán)如果沒(méi)有從初始角度開(kāi)始就會(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緩存起來(lái)不要在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)頁(yè)里復(fù)用就麻煩了。我會(huì)把它封裝成一個(gè)CanvasWheel組件通過(guò)props接收獎(jiǎng)品列表、指針位置、旋轉(zhuǎn)動(dòng)畫時(shí)長(zhǎng)通過(guò)events回傳中獎(jiǎng)結(jié)果。這樣業(yè)務(wù)頁(yè)面里只需要維護(hù)一個(gè)獎(jiǎng)品數(shù)組不用關(guān)心 canvas 的繪制細(xì)節(jié)。組件內(nèi)部的核心邏輯是監(jiān)聽(tīng)prizes的深度變化自動(dòng)調(diào)用setPrizes。特別注意的是不要把prizes的默認(rèn)值寫成[]然后直接內(nèi)聯(lián)修改務(wù)必通過(guò)watch監(jiān)聽(tīng)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)。常見(jiàn)需求是扇區(qū)背景使用漸變色或品牌 logo 圖片。小程序 canvas 同樣支持ctx.createLinearGradient但背景圖片需要先用uni.getImageInfo拿到本地路徑再用ctx.drawImage繪制。要注意繪制圖片時(shí)如果圖片尚未緩存drawImage會(huì)靜默失敗所以我會(huì)把圖片預(yù)加載和扇形繪制分開(kāi)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ì)卡。常見(jiàn)優(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 上繪制指針。這樣每幀只需要繪制一次圖片和指針繪制成本大幅下降。不過(guò)這個(gè)優(yōu)化有前提——獎(jiǎng)品數(shù)不能變化扇區(qū)角度固定。一旦獎(jiǎng)品權(quán)重變化離屏緩存必須重建。有一次我在一個(gè)抽獎(jiǎng)活動(dòng)里偷懶沒(méi)有做緩動(dòng)直接用線性動(dòng)畫結(jié)果產(chǎn)品經(jīng)理反饋“轉(zhuǎn)盤停下來(lái)的那一瞬間特別生硬”。后來(lái)我把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 章的角度模型在草稿紙上推一遍再開(kāi)始碼代碼多花十分鐘后面能省你好幾個(gè)小時(shí)。本文還有配套的精品資源點(diǎn)擊獲取