【原创】小程序大转盘抽奖代码

Page({
	onLoad(op){
		this.cvs = wx.createCanvasContext("draw", this);
		// 初始缩放比例
		var rect = wx.getSystemInfoSync();
		this.scale = Math.min(rect.screenWidth, rect.screenHeight) / 100;
		this.pan = new this.PanClass([
			{ id: 0, text: "抱歉" },
			{ id: 7, text: "锤子" },
			{ id: 9, text: "小米" },
			{ id: 30, text: "苹果" },
			{ id: 8, text: "黑莓" },
			{ id: 5, text: "松果" },
			{ id: 6, text: "石榴" },
			{ id: 40, text: "山楂" }
		]);
		this.startPlay();
	},

// 点击开始抽奖
	doPlay() { this.pan.startRotate(); },

// 清空定时器
	onUnload(){ this.die = true; },

// 动画开始播放
	startPlay() {
		if (this.die) return;
		var cvs = this.cvs;
		cvs.scale(this.scale, this.scale);
		cvs.clearRect(0, 0, 100, 100);
		this.drawFrame().forEach(x => x(cvs));
		cvs.draw();
		// 每秒50帧
		setTimeout(z => this.startPlay(), 1e3 / 50);
	},

// 绘制场景
	drawFrame() {
		var arr = new Array;
		// 绘制背景
		arr.push(e => {
			//e.setFillStyle("#abcdef");
			//e.fillRect(0, 0, 100, 100);
		});
		// 绘制阴影
		arr.push(e => {
			e.save();
			e.translate(50, 90);
			e.scale(1, 0.15);
			e.arc(0, 0, 30, 0, Math.PI * 2);
			e.setFillStyle("rgba(0, 0, 0, 0.3)");
			e.fill();
			e.restore();
		});
		// 绘制圆盘
		arr.push(e => {
			e.save();
			this.pan.draw(e);
			e.restore();
		});
		// 绘制对象一
		arr.push(e => {
			e.save();
			e.translate(50, 50);
			// 旋转
			e.rotate(45 * Math.PI / 180);
			e.setFillStyle("#abcdef");
			e.fillRect(-10, -10, 20, 20);
			e.restore();
		});
		return arr;
	},

// 转盘类
	PanClass(arr) {
		var num = arr.length;	// 奖品数量
		var jiao = 360 / num * Math.PI * 2 / 360;
		var ost = -jiao / 2 - Math.PI/2;
		var arrColor = [ "red", "yellow", "green", "blue", "orange", "white" ];
		var r = 40;	// 圆的半径为40vw
		var speed = 10;	// 旋转速度
		var start = false, rotate = 360 / num / -2;
		var stop, timer = 1e3 / 50;
		var idList = new Object;
		// 初始化商品索引
		arr.forEach((x, i) => idList[x.id] = i);
		// 防止颜色冲突
		if(num % arrColor.length == 1) arrColor.shift();
		// 绘制帧
		this.draw = e => {
			e.translate(50, 50);
			// 当前帧旋转角度
			e.rotate(rotate * Math.PI * 2 / 360);
			e.setFontSize(4);
			// 扇形绘制
			for(var i = 0; i < num; i++) {
				e.beginPath();
				e.arc(0, 0, 40, ost, jiao + ost);
				e.lineTo(0, 0);
				e.setFillStyle(arrColor[ i % arrColor.length ]);
				e.fill();
				e.setFillStyle("black");
				e.fillText(arr[i].text, -4, -30);
				e.rotate(jiao);
			}
		};
		// 变速器
		function fadeRotate(sp1, sp2, sec, func) {
			sec -= timer;
			if (sec < 0) return console.log(rotate), func();
			// 保留一位小数以提升精度
			var spd = (Math.max(sp1, sp2) * sec * sec / 4e6).toFixed(1) - 0;
			if(sp2 > sp1) spd = sp2 - spd;
			rotate = (spd + rotate) % 360;
			setTimeout(z => fadeRotate(sp1, sp2, sec.toFixed(6), func), timer);
		}
		// 执行旋转
		function doRoate(){
			if(!start) return;
			// 变更角度
			rotate = (rotate + speed) % 360;
			setTimeout(doRoate, timer);
			if(stop > -1 && Math.abs(rotate - stop) < speed) {
				// 精度偏移修正
				rotate = stop;
				stopRotate();
			}
		}
		// 开始旋转
		this.startRotate = e => {
			if(start) return;
			start = true; stop = -1; rotate = 0;
			console.log(rotate);
			// 2秒内速度从1升级到20
			fadeRotate(0, speed, 2e3, doRoate);
			// 6秒后自动结束旋转，并随机抽出奖品
			setTimeout(z => {
				// 生成随机中奖商品的ID
				var goodsId = arr[Math.floor(Math.random() * num)].id;
				var idx = idList[goodsId] || 0;
				console.log("当前奖品是：", arr[idx].text);
				// 中奖时停止的角度(往右偏移了100度)，因为是顺时针转，所以应该反向取奖品索引
				stop = (360 / num * (num - idx) + 32) % 360;
			}, parseInt(Math.random() * 3e3) + 1e3);
		};
		// 停止旋转
		var stopRotate = e=> {
			start = false;
			console.log(rotate);
			fadeRotate(speed, 0, 2e3, z => {  });
		};
	}
});

[您可以先修改代码再运行]