介紹

最近在微信小程序中實現如下這種抽獎效果.

lottery_sample.gif

由這個效果來看, 可以分成三個部分

背景

轉盤

抽獎按鈕

上面的實現有很多種方法, 很多大神也給出了這種效果的實現方式. 我自己來參照過大神的實現, 最后發現實際使用中，有些地方并不如意.

實現

上面三個部分每一種都有很多實現方式

背景

這是個背景是一個帶有過度背景的圓, 再加邊上有很多小圓. 這個其實并不難, 有很多實現方式.

本倉庫中的 index 頁面使用 css 實現, lottery 頁面直接使用圖片(lottery主要用來講解一個更重要的問題，其它盡量簡單，可以少點干擾)

轉盤

轉盤的扇形使用 canvas 來實現, 這應該沒有問題. 轉盤上的字, 可以直接用 canvas 來畫, 也可以用 html 加 css 旋轉效果來實現. 一般情況使用 html+css 可能在字體格式方面會更方便點.

本倉庫中的 index 頁面使用 html+css 來實現. lottery 使用 canvas 來畫字.

抽獎按鈕

這個按鈕是不動的，可以用 html 實現.

在小程序上的問題

提出問題之前，先看一下這個文章, 從中我們可以知道, 小程序中的 canvas 與 html 組件屬于不同的層, z-index 無法控制 canvas 與 html 之間的深度關系. 當然文中還提到了"同層渲染"(將 canvas 渲染到 WebView 也就是與 html 同層) 和 cover-view , cover-image 來解決開發者想解決 canvas 與 html 的深度關系的問題, 實際我使用下來, 并不覺得好用, 有效.

好了，現在提出我在完成這個抽獎效果, 遇到的問題, 那就是我想在轉盤上顯示 html 的抽獎信息文字，與中間的抽獎按鈕, 都遇到了 canvas 總是在最上層的問題.

解決方案一

我們知道小程序中的 canvas 接口有新舊兩套接口. 本倉庫中的 index 界面就是使用舊接口配合 z-index 來完成對應的實現

解決方案二(推薦)

使用 canvas 新接口生成圖片, 然后所有的實現都可以使用 html 來實現, 這樣適應性最強. 我覺得這是對應本效果最好的實現方式. 本倉庫中的 lottery 界面對應就是這種實現。

轉自: HH

總結

以上是生活随笔為你收集整理的c语言随机抽奖小程序,小程序抽奖实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。