vue 幸运大抽奖源码

项目有个抽奖需求，此项目运用vux框架
页面绘图是用canvas画图

<div class="canvas-wrapper">
<canvas ref="canvas" id="canvas" width="320" height="320">抱歉！浏览器不支持。</canvas>
<div id="btn" @click.prevent="start"/> // 抽奖按钮
</div>
//绘图
methods:{
initCanvas(num = 8) {
const canvas = this.$refs.canvas
if (!canvas.getContext) {
alert('抱歉！浏览器不支持该游戏。')
return
}
// 获取绘图上下文
let ctx = canvas.getContext('2d')

const img = new Image()
img.src = '../static/2.jpg'
img.onload = function () {
ctx.drawImage(img, 0, 0, 320, 320)
}
}
// 调用
mounted() {
this.initCanvas()
}

// 抽奖事件

methods:{
start() {
let deg = Math.floor(Math.random() * 4) * 2 * 360 / 8  //随机度数
deg += 360 / 8
if (this.ONCE++ === 0) {  // 用户只能参加一次
this.$refs.canvas.style.transform = `rotate(${1800 + deg}deg)`
}
}
beforeCreate() {
this.ONCE = 0
}

[参考]https://www.geek-share.com/detail/2669393784.html