是canvas  写错了，不好意思   代目如下

wxml代码如下

<canvas animation="{{animationData}}" style=“width: 300px; height: 300px;”  canvas-id=“lotteryCanvas”></canvas>

<view bindtap=“getLottery” class=“canvas-btn”>抽奖</view>

wxss代码如下

.canvas-btn{

position: relative;

left: 110px;

top: 110px;

z-index: 100;

width: 80px;

height: 80px;

border-radius: 50%;

color: #F4E9CC;

background-color: #E44025;

line-height: 80px;

text-align: center;

font-size: 20px;

text-shadow: 0 -1px 1px rgba(0,0,0,.6);

box-shadow: 0 3px 5px rgba(0,0,0,.6);

text-decoration: none;

}

js代码如下

Page({

data: {

animationData: {},

},

getLottery: function () {

var that = this;

// 初始化 rotate

var animationInit = wx.createAnimation({

duration: 1

})

this.animationInit = animationInit;

animationInit.rotate(0).step();

this.setData({

animationData: animationInit.export(),

})

// 旋转抽奖

setTimeout(function() {

var animationRun = wx.createAnimation({

duration: 4000,

timingFunction: ‘ease’

});

//that.animationRun = animationRun

animationRun.rotate(360 * 8).step();

that.setData({

animationData: animationRun.export()

})

}.bind(this), 100)

},

onShow: function (e) {

var that = this;

// getAwardsConfig

var awardsConfig =  [{ index: 0, name: “红包一个”, id: 5 },

{ index: 1, name: “下次努力”, id: 0 },

{ index: 2, name: “3元券”, id: 4 },

{ index: 3, name: “下次努力”, id: 0 },

{ index: 4, name: “5元券”, id: 3 },

{ index: 5, name: “下次努力”, id: 0 },

{ index: 6, name: “半价苹果”, id: 2 },

{ index: 7, name: “下次努力”, id: 0 },

{ index: 8, name: “免费苹果”, id: 1 },

{ index: 9, name: “下次努力”, id: 0 }];

// wx.setStorageSync(‘awardsConfig’, JSON.stringify(awardsConfig))

// 绘制转盘

var len = awardsConfig.length,

rotateDeg = 360 / len / 2 + 90,

turnNum = 1 / len  // 文字旋转 turn 值

var ctx = wx.createCanvasContext(‘lotteryCanvas’, this);//生成一个绘图的canvals对象

for (var i = 0; i < len; i++) {

// 保存当前状态

ctx.save();

// 开始一条新路径

ctx.beginPath();

// 位移到圆心，下面需要围绕圆心旋转//150  150 是300长宽正方形的中心点

ctx.translate(150, 150);

// 从(0, 0)坐标开始定义一条新的子路径

ctx.moveTo(0, 0);

// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。

ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);

// 绘制圆弧

ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);

// 颜色间隔

if (i % 2 == 0) {

ctx.setFillStyle(’#ffb820’);

} else {

ctx.setFillStyle(’#ffcb3f’);

}

// 填充扇形

ctx.fill();

// 绘制边框

ctx.setLineWidth(0.5);

ctx.setStrokeStyle(’#e4370e’);

ctx.stroke();

ctx.setFontSize(20);

ctx.setFillStyle(‘black’);

ctx.fillText(awardsConfig[i].name, 60, 30);

// 恢复前一个状态

ctx.restore();

}

ctx.draw();

}

})