vue+canvas绘转盘抽奖总结

实现目标

image.png

旁边的不管，是贴图，主要是中心区域：
1、先用ctx.arc画出扇形并填充颜色
2、在相应的扇形内填充奖品的图片和文字
3、 控制转盘能在指定奖品id的时候能旋转到相应的扇形区域

• 画出扇形
  关键代码

 let canvasW = canvas.width // 画板的高度
 let canvasH = canvas.height // 画板的宽度
 let colors = ['RGBA(255, 243, 211, 1)', 'RGBA(255, 250, 237, 1)']
 //计算每个奖项所占角度数，以弧度计
  let baseAngle = (Math.PI * 2) / this.prizeList.length  // this.prizeList是我的奖品数组
  for (let index = 0; index < this.prizeList.length; index++) {
        ctx.save()
        let angle = index * baseAngle
        ctx.beginPath() //开始绘制
        ctx.arc(
          canvasW * 0.5,
          canvasH * 0.5,
          0,
          angle,
          angle + baseAngle,
          false
        )

        // 把开始绘制弧线的位置移到12点钟方向并绘制弧线
        ctx.arc(
          canvasW * 0.5,
          canvasH * 0.5,
          240,
          baseAngle * index - Math.PI / 2 - baseAngle / 2,
          baseAngle * (index + 1) - Math.PI / 2 - baseAngle / 2,
          false
        )
        // ctx.lineTo ( canvasW * 0.5 , canvasW * 0.5 );
        if (index % 2 == 0) {
          ctx.fillStyle = colors[0] //设置每个扇形区域的颜色
        } else {
          ctx.fillStyle = colors[1] //设置每个扇形区域的颜色
        }
        ctx.stroke() //开始链线
        ctx.fill() //填充颜色
        ctx.restore()
      }

• 填充相应文字和图片

      for (let index = 0; index < this.prizeList.length; index++) {
        let angle = index * baseAngle
        let img = new Image()
        img.src = this.prizeList[index].image
        let that = this
        img.onload = function() {
          ctx.save()
          ctx.beginPath()
          //把画布移到中心。240是我的半径
          ctx.translate(240, 240)
          //rotate方法旋转当前的绘图
          ctx.rotate(angle)
          // 填充文字和图片 具体的位置看自己的设计稿
          ctx.fillText(that.prizeList[index].name, 0, -217)
          ctx.fillText(that.prizeList[index].remark, 0, -194)
          ctx.drawImage(img, -50, -180, 100, 100)
          ctx.closePath()
          ctx.restore()
        }
      }

• 控制转盘 见下列全部代码