用微信小程序开发的Canvas绘制可配置的转盘抽奖

<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>