最近在学canvas做动画，于是就写个转盘练下手。
上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）

代码很简单，都注释了，直接上代码吧，嘤嘤嘤

html

  1. <body>
  2.   <canvas id="canvas">您的浏览器不支持canvas</canvas>
  3.   <img src="./zp.jpg" alt="" id="img">
  4. </body>

css

  1. <style>
  2.     #canvas{
  3.       position: absolute;
  4.       left: 230px;
  5.       top: 230px;
  6.     }
  7.     #img{
  8.       width: 600px;
  9.       height: 600px;
  10.     }
  11.   </style>

js

  1.   var canvas = document.getElementById('canvas');
  2.   var context = canvas.getContext('2d');
  3.   //设定画布和宽
  4.   canvas.width=140;
  5.   canvas.height=140;
  6.   var then = Date.now();
  7.   var now;//利用时间差来控制转盘最小转动时间
  8.   var first_deg=0;//用来记录转动的角度
  9.   var rotate_deg=0;//每次转动的角度，用来实现变速运动
  10.   var end_deg =85;//中奖角度
  11.   var speedUp = true;//判断是否在加速阶段
  12.   var f;
  14.   // 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布
  15.   context.translate(70,70);
  16.   function draw(){
  17.     context.clearRect(-70, -70, 70, 70);
  18.     context.beginPath();
  19.     context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
  20.     context.moveTo(-50,0);
  21.     context.lineTo(50,0);
  22.     context.lineTo(0,-70);
  23.     context.rotate(rotate_deg*Math.PI/180);
  24.     context.closePath();
  25.     context.fillStyle='red';
  26.     context.fill();
  27.   }
  28. // 将运动分为3段，加速，匀速，减速
  29.   function loop(){
  31.     //循环调用，产生动画效果
  32.     f = window.requestAnimationFrame(loop);
  33.     now = Date.now();
  35.     //开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已
  36.     if(rotate_deg<=20&&speedUp){
  37.       rotate_deg +=1;
  38.     };
  40.     //2s后开始减速（即最小转动时间），减速是为了视觉上的美观
  41.     if(now - then > 2000){
  43.       //如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。
  44.       if(rotate_deg>=2){
  45.         speedUp = false;
  46.         rotate_deg -=1;
  47.       }
  48.       //设置中奖区间为+-5度（设置固定角度会让动画有点难看）
  49.       if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){
  50.         window.cancelAnimationFrame(f);//停止循环
  51.         //中奖操作
  52.       }
  53.     };
  54.     first_deg += rotate_deg;//记录转过的角度
  55.     draw();//绘制图形
  56.   }
  57.   loop();

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。有大佬讲下怎么实现转动时长都一样吗？
代码写得很粗糙，实现方法也是自己刚想了就撸了，可能很多地方没考虑好，望谅解。

canvas一个简单粗暴的中奖转盘的更多相关文章

  1. Html5 Canvas一个简单的画笔例子

    相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...

  2. <html5 canvas>一个简单的矩形

    Html5: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...

  3. 一起撸个简单粗暴的Tv应用主界面的网格布局控件（上）

    这一篇是真的隔了好久了~~,也终于可以喘口气来好好写博客了,这段时间实在是忙不过来了,迭代太紧.好,废话不多说,进入今天的主题. 效果 图一是Tv应用:当贝市场的主页 图二是咱自己撸的简单粗暴的 Tv ...

  4. LeakCanary：简单粗暴的内存泄漏检測工具

    差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...

  5. 关于前端jsonp跨域和一个简单的node服务搭建

    先讲下概念 同源策略:是一种约定,浏览器最核心最基本的安全功能,(同域名,同协议,同端口)为同源 跨域: 跨(跳):范围 域 (源):域名,协议,端口 域名:ip的一种昵称(为了更好记住ip地址)如: ...

  6. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  7. 简单粗暴地理解 JavaScript 原型链 （一个充满歪门邪理的理解方法，有助于新手哦！）

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  8. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  9. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

随机推荐

  1. 【转】阿里架构总监一次讲透中台架构，13页PPT精华详解

    转:https://blog.csdn.net/u011323949/article/details/99542576 本文整理了阿里几位技术专家,如架构总监 谢纯良,中间件技术专家 玄难等几位大牛, ...

  2. SpringMVC开发中遇到的异常1：No primary or default constructor found for interface java.util.List

    Request processing failed; nested exception is java.lang.IllegalStateException: No primary or defaul ...

  3. canvas介绍（画布）

    canvas(画布)主要是位图 svg(矢量图) canvas标签,必须要写的3个属性 id width height 为什么不再style中设置width和height呢? 因为这设置width和h ...

  4. customizable route planning 工业界地图产品的路径规划

    https://www.microsoft.com/en-us/research/publication/customizable-route-planning/?from=http%3A%2F%2F ...

  5. 邻近双线性插值图像缩放的Python实现

    最近在查找有关图像缩放之类的算法,因工作中需要用到诸如此类的图像处理算法就在网上了解了一下相关算法,以及其原理,并用Python实现,且亲自验证过,在次与大家分享. 声明:本文代码示例针对的是plan ...

  6. Eclipse的switch workspace 选项中删除多余的workspace

    方法1 Eclipse图形化工具: 打开Eclipse后,选择功能菜单里的Windows->Preferences->,弹出对话框后,选择General->Startup and S ...

  7. （二）Maven之坐标和依赖

    目录 坐标 依赖 目录 坐标 引言: 坐标是依赖管理的基础,是构建的唯一标识. 组成元素: 使用groupId.artifactId.version.packaging.classifier标签即可定 ...

  8. IPv6 首部格式

    <图解TCP/IP> 4.8 IPv6的首部格式 IPv6为了减轻路由器的负担,省略了首部校验和字段.因此路由器不再需要计算校验和,从而提高了包的转发效率. 此外,分片处理所用的识别码成为 ...

  9. 【ABAP系列】SAP 读取生产订单 记入文档的货物移动明细

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单 记入文档的 ...

  10. 反弹，反向穿越防火墙，NAT网关等乱七八糟的术语

    反弹,反向穿越防火墙,反向穿越NAT网关等一切与反向有关的网络活动,往往都是指同一回事情. 以前的木马都是客户端(攻击者)控制服务器(用户),把配置好的服务器发给用户来攻击,叫做正向. 现在的木马代码 ...