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

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

html

<body>

  <canvas id="canvas">您的浏览器不支持canvas</canvas>

  <img src="./zp.jpg" alt="" id="img">

</body>

css

<style>

    #canvas{

      position: absolute;

      left: 230px;

      top: 230px;

    }

    #img{

      width: 600px;

      height: 600px;

    }

  </style>

js

  var canvas = document.getElementById('canvas');

  var context = canvas.getContext('2d');

  //设定画布和宽

  canvas.width=140;

  canvas.height=140;

  var then = Date.now();

  var now;//利用时间差来控制转盘最小转动时间

  var first_deg=0;//用来记录转动的角度

  var rotate_deg=0;//每次转动的角度，用来实现变速运动

  var end_deg =85;//中奖角度

  var speedUp = true;//判断是否在加速阶段

  var f;

  // 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布

  context.translate(70,70);

  function draw(){

    context.clearRect(-70, -70, 70, 70);

    context.beginPath();

    context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);

    context.moveTo(-50,0);

    context.lineTo(50,0);

    context.lineTo(0,-70);

    context.rotate(rotate_deg*Math.PI/180);

    context.closePath();

    context.fillStyle='red';

    context.fill();

  }

// 将运动分为3段，加速，匀速，减速

  function loop(){

    //循环调用，产生动画效果

    f = window.requestAnimationFrame(loop);

    now = Date.now();

    //开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已

    if(rotate_deg<=20&&speedUp){

      rotate_deg +=1;

    };

    //2s后开始减速（即最小转动时间），减速是为了视觉上的美观

    if(now - then > 2000){

      //如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。

      if(rotate_deg>=2){

        speedUp = false;

        rotate_deg -=1;

      }

      //设置中奖区间为+-5度（设置固定角度会让动画有点难看）

      if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){

        window.cancelAnimationFrame(f);//停止循环

        //中奖操作

      }

    };

    first_deg += rotate_deg;//记录转过的角度

    draw();//绘制图形

  }

  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. Ecipse代码调试

    1.设置断点 2.启动调试 在代码空白处中右击,选择Debug as —>1 Java Application 快捷键 表示当前实现继续运行直到下一个断点,快捷键为F8. 表示打断整个进程 表示 ...

  2. win7 编译postgresql9.6.8

    一.环境 windows7 postgresql9.6.8 vs2010 perl5.24.3 二.编译安装 1.安装perl,安装到C:\Perl64路径下,安装完成后设置环境变量PATH和Perl ...

  3. The Linux usage model for device tree data

    Linux and the Device Tree The Linux usage model for device tree data Author: Grant Likely grant.like ...

  4. set集合 浅层拷贝会和深层拷贝

    一.什么是set集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 1.去重,把一个列表变成集合, ...

  5. jmeter_linux下运行

    1 先把jmeter上传到linux,解压后配置环境变量(/etc/profile) 2 把在Windows上面做好的脚本上传到linux上面(linux下运行jmeter是在jmeter的bin目录 ...

  6. JSPDF 原理

    Jspdf是一个将html内容生成pdf文件的库,原理是对输入浏览器的文字或二进制图片进行base64编码转换,以pdf中应有的形式组织,最终以data uri scheme, data:applic ...

  7. Linux - 创建交换分区 swap

    购买的 1GB 内存的 Linux 小机器,在编译安装 PHP 的时候内存捉急,只好开启 swap 交换分区来增大内存. [root@VM_139_38_centos php-7.2.12]# cat ...

  8. nginx windows安装基础

    nginx在 window上运行需要1.17.3以上. 官方文件https://nginx.org/en/docs/windows.html nginx启动: 1:进入安装目录,双击nginx.exe ...

  9. 【ABAP系列】SAP ABAP ALV中设置CHECKBOX同时选中事件

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP ALV中设置CHE ...

  10. 浅谈Java反射机制 之 获取类的字节码文件 Class.forName("全路径名") 、getClass()、class

    另一个篇:获取 类 的 方法 和 属性(包括构造函数) 先贴上Java反射机制的概念: AVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它 ...