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

今天在分享个微信小程序实战 Canvas绘制可配置的转盘抽奖功能案例。今天我们就分享这样的小教程。希望对大家有所帮助。

不多说了,二当家要上图来啦!

快去拿个小板凳,坐等更多更新

注:如未能获取成功,或者遇到其他问题,本人微信:geekxz 。

如果需要更多动画,欢迎关注 【极客小寨】微信公众号,回复抽奖下载链接!所有文档会持续更新,欢迎关注一起成长!

2

示例部分文件展示

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

原文发布于微信公众号 - C与Python实战(CPythonPractice)

原文发表时间:2018-07-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玉树芝兰

幻灯视频素材怎么剪

把抽象概念形象化。例如化学课上,讲述不同元素发生反应会怎么样,单单语言描述或者静态配图无法把过程完整形象描摹出来,这时候一段化学反应的录像会立即让学生把握全貌。

9620
来自专栏知晓程序

如何避免买到假 iPhone?这个小程序帮你测一测

月初时,已经从美国前方传来消息,在 T-Mobile 官网,只要花费 749.99 刀,折合人民币 5106 元,就能拿下 256 GB 的 iPhone 7 ...

9310
来自专栏ShaoYL

APP上线被APPStore拒绝的各种原因

44270
来自专栏Timhbw博客

WWDC2016简报

2016-06-1407:35:04 发表评论 896℃热度 iOS 10 macOS Sierra WatchOS 3 tvOS 目录 作为一个iO...

306110
来自专栏BestSDK

GNU/Linux与开源文化的那些人和事

image.png 一、计算机的发明 世上本无路,走的人多了,就有了路。世上本无计算机,琢磨的人多了……没有计算机,一切无从谈起。 三个人对计算机的发明功不可没...

406100
来自专栏Linyb极客之路

如何提高网站的可访问性?

关于可访问性的错误观念 可访问性影响所有用户,而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人...

15510
来自专栏张叔叔讲互联网

【一文读懂】什么是网络爬虫,每天都在忙乎什么?

先自我介绍一下,我是一只网络爬虫,出生在计算机中,操作系统就是我的爸爸妈妈,现在都活了2000毫秒了,这个放到我们生活的世界来说,已经属于比较长寿了。我出生之后...

21220
来自专栏极乐技术社区

小程序搜索栏新增“搜索历史” | 微信iOS版更新至6.6.0 ,客户端大更新、公众号界面、后台改版

轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 小程序搜索栏新增“搜索历史” 近期,极乐叔发现微信中出现了小程序历史搜索,在小程序发现栏中点击小程序搜索框...

47480
来自专栏知晓程序

买电影票方式那么多,为什么我只推荐这个小程序 | 亲儿子 #2

随着微信团队的不断努力,小程序也变得日益完善。小程序以其方便的使用条件、更低的开发门槛吸引了很多人。

9120
来自专栏知晓程序

90% 的直男约会败于尬撩,另外的 10% 都在用这个小程序

打开「开撩神器」小程序,进入主界面,系统会自动展示各种形式的模板,你可以根据自己的喜好,随心所「撩」,自由发挥。

9410

扫码关注云+社区

领取腾讯云代金券