H5 转盘抽奖（awardRotate.js）碰到的问题

如题，在使用awardRotate.js做这个大转盘的时候碰到无数坑，下面来细数一下：
一、canvas 绘制远程图片上不去
问题的关键在于要等图片加载完成再绘制，这里我们需要用到Promise 和 img.onload
var promiseAll = [], img = [];
for (var i = 0; i < 8; i++) {
promiseAll[i] = new Promise((resolve, reject) => {
img[i] = new Image() ;
img[i].src = 'https://xxxxxxxxx.jpg' ;
img[i].onload = function () {
//第i张加载完成 resolve(img[i])
} })}
Promise.all(promiseAll).then((img) => {
// 开始绘制canvas
})
这样处理再安卓机上是没问题的，但是到了IOS上又不行了，在绘制图片的时候发现加载的图片宽度为0，说明图片还是未加载完成。一番折腾无果，没办法，只能把拿到的图片url放在img标签里面，加上id，隐藏起来，在canvas绘制图片的时候，根据id去拿图片，这样就万无一失啦，可算解决了！
二、图片模糊问题
<canvas id="wheelcanvas" width="422" height="422"></canvas>
canvas 先缩小4倍，改为：
<canvas id="wheelcanvas" width="1688" height="1688"></canvas>
绘制canvas的时候再放大4倍
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// 放大四倍
ctx.scale(4, 4);
}
三、背景图片不兼容问题
转盘指针和转盘外边框，一开始使用背景图片来做的（background-size: 100% 100%），结果发现在不同的手机上面，不是这里缺了一点就是那里多了一点，万般无奈，直接用img吧，完美解决。
四、偶现点击转盘，出现横向滚动条问题
滚动条是转盘转动之后才出现的，经过研究发现，奖品数量大于2时，canvas转动之后，不在水平位置，左右两边超出容器了，给canvas的父级元素设置overflow: hidden；可完美解决。
五、转盘等后台接口返回之后才开始转，当后台接口较慢时，迟迟转不起来，体验很差，可以先转起来，待后台返回之后再重新转。