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.cnblogs.com/givebest/p/5296335.html