LOVE2FY
猫和鱼_Swag
采纳率50%
2019-10-28 21:14

前端js 如何实现将一个轮盘旋转随机的角度?

##前端js 如何实现将一个轮盘旋转随机的角度?

问题描述:我想要做一个圆盘,如下图:
图片说明,每个切片角度对应不同的值。想做出像抽奖一样的效果。随机角度旋转,最后选出对应切片的编号。如图中有10个切片,则选出10个编号。

###请问如何实现这种效果,如果可以给出详细的思路就更好了。提前谢谢大家!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • weixin_42603344 于金冬 2年前

    前不久做了你这个事儿

    方案1 使用canvas绘制

    方案2 通过css3转换

    方案1 核心代码

        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        // 若要顺时针旋转60度 先将画布逆时针旋转60度,绘制以后在转回到原始位置
        const deg = 60; 
        context.rotate(-deg * Math.PI / 180);
        context.drawImage(img, 0, 0 , width, width, cwidth,cwidth); // 
        context.rotate(deg * Math.PI / 180);
    
    

    方案2 核心代码

    transform:rotate(60deg);
    
    点赞 评论 复制链接分享
  • dabocaiqq dabocaiqq 2年前