关于canvas绘制大转盘并旋转
2017-04-17 17:46
274 查看
O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果。现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~
大转盘整个思路:
绘制整个转盘
编写一个随机数,用来当接口调用后的返回时间
改变css3的属性用来达到想要转动的效果,效果就是先匀速,接口调成功之后就加速,随后缓慢加速
绘制大转盘
(一)可以用一张图片,这是最简单的,转动的话只是针对这张图片的转动
(二)用canvas绘制大转盘
在这里我们主要说一下canvas绘制大转盘:
讲解一下我所写的代码,就是我先将咱们这个圆主要划分了六块,canvas在画圆的时候,最主要的就是绘制六等分的图形,我们需要将角度转换成弧度,来进行绘制。因为一共6个扇形组合成的圆,所以我们进行一个for循环,然后计算每一个扇形的弧度,整个的公式就是```
degrees * Math.PI/180
var randommuil = Math.random(1000)*1000+1;```
因为在正常使用的时候,我们是需要调接口的,然后接口成功给你发挥你需要转动到哪一块,这期间是有一定的等待的时间。设置的这个随机数就是1-1000的随机数。
编写转动的效果
这个我的思路是这样的:就是在后台返回之前,匀速转动,接收到返回之后,先加速,后减速。但是我现在做的是模拟的,所以我设置了一个定时器,时间是随机数产生的。在启发定时器之前是匀速转动的。
其实我写的很不好,因为用到的是CSS3.这个样子不如用js来控制的有自由度一点。要是大家知道怎么用js写转动效果不是依靠插件的,请给我留言或私信我,让我也学习学习~~~
最后,演示在这
大转盘整个思路:
绘制整个转盘
编写一个随机数,用来当接口调用后的返回时间
改变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
![Paste_Image.png](//upload-images.jianshu.io/upload_images/5404409-320240e26580c2f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #####编写随机数
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写转动效果不是依靠插件的,请给我留言或私信我,让我也学习学习~~~
最后,演示在这
相关文章推荐
- Android 通过CANVAS旋转 绘制文字 竖直方向DEMO
- Android开发:canvas.drawTextOnPath()无效----Android4.03的又一个bug!!!!(关于Canvas绘制的方方面面)
- HTML5 Canvas 绘制旋转45度佛教万字
- 测试canvas绘制旋转文字的性能
- Android关于在Canvas类里的绘制线程问题汇总
- canvas加载图片·绘制像素图·旋转平移缩放图片
- H5canvas加载图片·绘制像素图·旋转平移缩放图片等等学习实践
- Android开发:ImageView上绘制旋转圆环(透明度不同的旋转圆环,利用canvas.drawArc实现)
- 修复界面bug并增加了自动提示是否输赢的 关于之前博客"html5 canvas 绘制象棋(将持续改进)"
- Canvas绘制旋转太极
- Canvas 旋转风车绘制
- 关于canvas在retina屏下绘制文字或图像模糊的解决方案
- Android开发:ImageView上绘制旋转圆环(透明度不同的旋转圆环,利用canvas.drawArc实现)
- ImageView上绘制旋转圆环(透明度不同的旋转圆环,利用canvas.drawArc实现) .
- 【JS】使用canvas绘制动画-旋转风车加速减速启动停止
- 第165天:canvas绘制圆环旋转动画
- canvas绘制旋转转盘
- android:Canvas绘制自旋转Bitmap
- Android开发:canvas.drawTextOnPath()无效----Android4.03的又一个bug!!!!(关于Canvas绘制的方方面面) .
- android 通过canvas旋转 绘制文字 竖直等不同方向的显示