用Canvas绘制抽奖游戏

效果图

具体实现代码如下：
1.绘制跑马灯

 light() { //跑马灯的绘制
    let that = this;    let itemsNum = that.data.itemsNum;
    lamp++;    if (lamp >= 2) {
      lamp = 0
    }
    ctx2.beginPath();
    ctx2.arc(150, 150, 150, 0, 2 * Math.PI);//绘制底色为红色的圆形
    ctx2.setFillStyle("#DF1E14");
    ctx2.fill();
    ctx2.beginPath();
    ctx2.arc(150, 150, 135, 0, 2 * Math.PI);//绘制底色为深黄的圆形
    ctx2.setFillStyle("#F5AD26");
    ctx2.fill();    for (let i = 0; i < itemsNum * 2; i++) {//跑马灯小圆圈比大圆盘等分数量多一倍。
      ctx2.save();
      ctx2.beginPath();
      ctx2.translate(150, 150);
      ctx2.rotate(30 * i * Math.PI / 180);
      ctx2.arc(0, -135, 8, 0, 2 * Math.PI);//绘制坐标为(0,-135)的圆形跑马灯小圆圈。

      //跑马灯第一次闪烁时与第二次闪烁时绘制相反的颜色，再配上定时器循环闪烁就可以达到跑马灯一闪一闪的效果了。

      if (lamp == 0) { //第一次闪烁时偶数奇数的跑马灯各绘制一种颜色
        if (i % 2 == 0) {
          ctx2.setFillStyle("#FBF1A9");
        } else {
          ctx2.setFillStyle("#fbb936");
        }
      } else { //第二次闪烁时偶数奇数的跑马灯颜色对调。
        if (i % 2 == 0) {
          ctx2.setFillStyle("#fbb936");
        } else {
          ctx2.setFillStyle("#FBF1A9");
        }
      }
      ctx2.fill();
      ctx2.restore();//恢复之前保存的上下文，可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖，
    }
    ctx2.draw();

  },

2.绘制每一份的抽奖扇形图

Items(e) {    let that = this;    let itemsArc = e;//每一份扇形的角度
    let Num = that.data.itemsNum;//等分数量
    let text = that.data.text;//放文字的数组
    for (let i = 0; i < Num; i++) {
      ctx.beginPath();
      ctx.moveTo(125, 125);
      ctx.arc(125, 125, 120, itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180);//绘制扇形，注意下一个扇形比上一个扇形多一个itemsArc的角度。
      ctx.closePath();      if (i % 2 == 0) {//绘制偶数扇形和奇数扇形的颜色不同
        ctx.setFillStyle(that.data.color[0]);
      } else {
        ctx.setFillStyle(that.data.color[1]);
      }
      ctx.fill();
      ctx.save();
      ctx.beginPath();
      ctx.setFontSize(12);//设置文字字号大小
      ctx.setFillStyle("#000");//设置文字颜色
      ctx.setTextAlign("center");//使文字垂直居中显示
      ctx.setTextBaseline("middle");//使文字水平居中显示
      ctx.translate(125, 125);//将原点移至圆形圆心位置
      ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋转文字，从 i+2 开始，因为扇形是从数学意义上的第四象限第一个开始的，文字目前的位置是在圆心正上方，所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
      ctx.fillText(text[i], 0, -90);
      ctx.restore();//保存绘图上下文，使上一个绘制的扇形保存住。
    }
    that.Images();
    ctx.draw(true);//参数为true的时候，保存当前画布的内容，继续绘制
  },

3.在扇形上绘制奖品

Images() {//绘制奖品图片，与绘制文字方法一致。
    let that = this;    let itemsArc = that.data.itemsArc;    let Num = that.data.itemsNum;    for (let i = 0; i < Num; i++) {
      ctx.save();
      ctx.beginPath();
      ctx.translate(125, 125);
      ctx.rotate(itemsArc * (i + 2) * Math.PI / 180);
      ctx.drawImage("../images/coupon.png", -23, -75, 46, 25);
      ctx.restore();
    }
  },

demo地址为：https://github.com/dt8888/canvas

这是之前无意中看到某位大神写的，蛮感兴趣想学习下，运行后发现有个问题，真机测试时，绘制的位置发生偏移，改了改，还是解决不了，希望哪位大神给与指导下。

作者：honey缘木鱼
链接：https://www.jianshu.com/p/2df5b0d1982b