正文
关于canvas绘制大转盘并旋转
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
O(∩_∩)O包子不才，最近磕磕巴巴写了一个大转盘的效果。现在想说一下整个的思路部分，要是有设么不对的还请多多指教，期待共同成为优秀的前端~~
大转盘整个思路：
- 绘制整个转盘
- 编写一个随机数，用来当接口调用后的返回时间
- 改变css3的属性用来达到想要转动的效果，效果就是先匀速，接口调成功之后就加速，随后缓慢加速
绘制大转盘
（一）可以用一张图片，这是最简单的，转动的话只是针对这张图片的转动
（二）用canvas绘制大转盘
在这里我们主要说一下canvas绘制大转盘：
// canvas开始绘图
var ctx = canvas.getContext('2d');
for (var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI/180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / num, false);
if (i % 2 == 0) {
ctx.fillStyle = '#b0e0e6';
}else{
ctx.fillStyle = '#e4c6d0';
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#b0e0e6';
ctx.stroke(); // 文字
ctx.fillStyle = '#fff';
ctx.font="18px sans-serif";
if(i == 0){
ctx.fillText('六元红包', 55, 55);
}
if(i == 1){
ctx.fillText('没红包', 47, 50);
}
if(i == 2){
ctx.fillText('流量大赠送', 40, 47);
}
if(i == 3){
ctx.fillText('谢谢惠顾',55, 55);
}
if(i == 4){
ctx.fillText('送个人给你',40, 47);
}
if(i == 5){
ctx.fillText('啥玩意',55, 55);
} // 恢复前一个状态
ctx.restore();
讲解一下我所写的代码，就是我先将咱们这个圆主要划分了六块，canvas在画圆的时候，最主要的就是绘制六等分的图形，我们需要将角度转换成弧度，来进行绘制。因为一共6个扇形组合成的圆，所以我们进行一个for循环，然后计算每一个扇形的弧度，整个的公式就是```
degrees * Math.PI/180
#####编写随机数
var randommuil = Math.random(1000)*1000+1;```
因为在正常使用的时候，我们是需要调接口的，然后接口成功给你发挥你需要转动到哪一块，这期间是有一定的等待的时间。设置的这个随机数就是1-1000的随机数。
编写转动的效果
这个我的思路是这样的：就是在后台返回之前，匀速转动，接收到返回之后，先加速，后减速。但是我现在做的是模拟的，所以我设置了一个定时器，时间是随机数产生的。在启发定时器之前是匀速转动的。
$('#btn').click(function(){
var randommuil = Math.random(1000)*1000+1;
// js实现匀速转动5圈，随后加速，再减速
$("#canvas").css("transition","all 6s linear");
setTimeout(function(){
$("#canvas").css("transition","all 6s ease-out");
$("#canvas").css("transform" , "rotate(2780deg)");
},randommuil);
其实我写的很不好，因为用到的是CSS3.这个样子不如用js来控制的有自由度一点。要是大家知道怎么用js写转动效果不是依靠插件的，请给我留言或私信我，让我也学习学习~~~
最后，演示在这
