React利用canvas实现大转盘抽奖效果,效果如下:
大转盘效果
主要代码:
const drawImg = (x, y, r, num, ctx, index, img) => {
ctx.save();
ctx.beginPath();
ctx.translate(x, y);
ctx.moveTo(0, 0);
ctx.rotate((index * (2 * Math.PI)) / num);
// 绘制扇形
ctx.arc(0, 0, r, (3 * Math.PI) / 2 - Math.PI / num, (3 * Math.PI) / 2 + Math.PI / num, false);
ctx.fillStyle = '#fff';
ctx.fill();
// 绘制边框
ctx.lineWidth = 2;
ctx.strokeStyle = '#FFD8BF';
ctx.stroke();
// 绘制奖品图片
// 目标尺寸
let _tw = r * 0.3;
let _th = r * 0.3;
ctx.drawImage(img, -_tw / 2, -y * 0.59, _tw, _th);
ctx.restore();
rotateCss(document.getElementById('wheel'), 360 / num / 2);
}
const loadingImg = () => {
let scale = parseInt(window.devicePixelRatio) || 2;
let wheelW = wheelWidth * scale;
let x = wheelW / 2;
let y = wheelW / 2;
let r = (wheelW / 2) * 0.8;
let num = prizeNum;
let wheel = document.getElementById('wheel');
wheel.width = wheelW;
wheel.height = wheelW;
let ctx = wheel.getContext('2d');
Object.keys(prizeList).forEach(index => {
let img = new Image();
img.onload = () => {
// 开始画图了
drawImg(x, y, r, num, ctx, index, img);
};
img.src = prizeList[index].rewardPic;
});
wheel.style.width = wheel.width / scale + 'px';
wheel.style.height = wheel.height / scale + 'px';
}