zl程序教程

您现在的位置是:首页 >  前端

当前栏目

基于JavaScript的幸运大转盘

JavaScript 基于 幸运
2023-09-11 14:21:45 时间

引言:幸运大转盘在很多网站上、APP都有出现,之前的话一直也没有去琢磨,自从把canvas学了一遍后,什么都想自己做一个,这不就写了个幸运大转盘玩玩,欢迎大家来指导交流!

页面效果:

实现思路

  1. 绘制外围的大转盘,就是绘制两个圆然后填充好颜色,第2个圆稍小些;
  2. 绘制6个扇形,因一个圆360度分成6份,故每份60度,根据度数计算出开始角度、结束角度,即可绘制出6个连续放置的扇形,分别配置不同的颜色;
  3. 在每个扇形的位置分别绘制奖项卡,也是根据角度来计算,然后把对应的图片绘上去;
  4. 在大转盘中心绘制指针图片,同时绘制一个跟图片大小接近的圆(白色填充),鼠标的移入和点