效果图
具体实现代码如下：
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
随时随地看视频
