微信小程序——转盘抽奖

最新推荐文章于 2024-09-26 10:39:11 发布

zhanjinfeng

最新推荐文章于 2024-09-26 10:39:11 发布

阅读量1.9w

点赞数 7

分类专栏：小程序

本文链接：https://blog.csdn.net/zhanjinfeng/article/details/84891412

版权

如题，该小程序为一款利用canvas实现的转盘抽奖效果，今天我就来总结一下转盘旋转具体实现原理，首先还是上图上代码(一下代码为转盘部分代码，想要查看完整代码，请移步支我的github，飞机票，点击跳转)

wxml代码（中间转盘部分代码）

<view class="canvas-container" style='margin:0 auto;'>
      <view animation="{
  {animationData}}" class="canvas-content" style='margin:0 auto;'>
        <canvas style="width: 300px; height: 300px; margin:0 auto;" 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}})">
              <text class='canvas-item-text-inner {
  {scale===1.4?"btnfont":"normal"}}'> {
  {item.award}}</text>
            </view>
          </view>
        </view>  
      </view>
       <view class="{
  {scale===1.4?'btn