Build a Configurable Canvas Lottery Wheel in WeChat Mini Programs – Step‑by‑Step Guide

Overview

Today we share a practical WeChat Mini Program case: a Canvas‑drawn, configurable lottery wheel. The tutorial provides a concise guide to help developers implement this feature in their own mini‑apps.

Demo Image

Example Files

<view class="wrapper">
    <view class="header">
        <text class="header-title">大转盘抽奖</text>
        <text class="header-subtitle">感恩节活动大抽奖，反馈广大客户</text>
    </view>
    <view class="main">
        <view class="canvas-container">
            <view animation="{{animationData}}" class="canvas-content">
                <canvas style="width:300px;height:300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas>
                <view class="canvas-line">
                    <view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform:rotate({{item.lineTurn}});transform:rotate({{item.lineTurn}})"></view>
                </view>
                <view class="canvas-list">
                    <view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
                        <view class="canvas-item-text" style="-webkit-transform:rotate({{item.turn}});transform:rotate({{item.turn}})">{{item.award}}</view>
                    </view>
                </view>
            </view>
            <view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽奖</view>
        </view>
        <view class="main-container">
            <view class="main-container-btn">
                <button bindtap="gotoList" type="primary">查看中奖</button>
            </view>
            <view class="main-container-rule">
                <text class="main-rule-title">活动规则：</text>
                <text class="main-rule-item">1. xxxxxxxxxxx</text>
                <text class="main-rule-item">2. xxxxxxxxxxx</text>
                <text class="main-rule-item">3. xxxxxxxxxxx</text>
                <text class="main-rule-item">4. xxxxxxxxxxx</text>
                <text class="main-rule-item">5. xxxxxxxxxxx</text>
            </view>
        </view>
    </view>
</view>

If you encounter issues retrieving the code or need further assistance, you can contact the author via WeChat (ID: geekxz).