猫和鱼_Swag 2019-10-28 21:14 采纳率: 50%
浏览 1261
已采纳

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

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

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

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

  • 写回答

2条回答 默认 最新

  • 于金冬 2019-11-08 15:47
    关注

    前不久做了你这个事儿

    方案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);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误