canvas一个简单粗暴的中奖转盘
最近在学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一个简单粗暴的中奖转盘的更多相关文章
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- <html5 canvas>一个简单的矩形
Html5: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...
- 一起撸个简单粗暴的Tv应用主界面的网格布局控件（上）
这一篇是真的隔了好久了~~,也终于可以喘口气来好好写博客了,这段时间实在是忙不过来了,迭代太紧.好,废话不多说,进入今天的主题. 效果 图一是Tv应用:当贝市场的主页 图二是咱自己撸的简单粗暴的 Tv ...
- LeakCanary：简单粗暴的内存泄漏检測工具
差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...
- 关于前端jsonp跨域和一个简单的node服务搭建
先讲下概念 同源策略:是一种约定,浏览器最核心最基本的安全功能,(同域名,同协议,同端口)为同源 跨域: 跨(跳):范围 域 (源):域名,协议,端口 域名:ip的一种昵称(为了更好记住ip地址)如: ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 简单粗暴地理解 JavaScript 原型链 （一个充满歪门邪理的理解方法，有助于新手哦！）
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
随机推荐
- foreach（增强for循环）和for的区别
https://www.cnblogs.com/XiaojianGo/p/7471860.html 首先说一下foreach有的也叫增强for循环,foreach其实是for循环的一个特殊简化版. 再 ...
- 【ABAP系列】SAP GUI740 PATCH5出现弹窗BUG
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP GUI740 PATCH ...
- 阅读笔记09-Java程序员必备的Intellij插件
1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 地址:plugins.jetbrains.com/plugin/7495--ignore 2. l ...
- 应用安全 - 软件漏洞 - Jira漏洞汇总
CVE-2019-8451 ssrf url = url + '/plugins/servlet/gadgets/makeRequest?url=' + host + '@www.baidu.com/ ...
- JavaSE编码试题强化练习2
1.编写递归算法程序:一列数的规则如下: 0.1.1.2.3.5.8.13.21.34...... 求数列的第40位数是多少. public class TestRecursion { public ...
- SpringBoot 使用logback
1.添加pom引用 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback ...
- 安装testlink时，出现”testlink/gui/templates_c、testlink/logs、testlink/upload_area不可写‘解决办法
在Testlink安装到最后,'...目录是否可写(由于用户运行webserver进程)’过程出错,如下图所示 1.首先想到/var/www/html/testlink/gui/templates_c ...
- C程序优化
1 优化内存使用 后期程序优化的时候看内存分配是否浪费:是否留有安全裕量:有些内存是否分配过多,有些内存是否分配了没使用:尤其是创建对象的时候
- hdu-2819.swap(二分匹配 + 矩阵的秩基本定理)
Swap Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- BZOJ 4919 (树上LIS+启发式合并)
题面 给定一棵n个节点的有根树,编号依次为1到n,其中1号点为根节点.每个点有一个权值v_i. 你需要将这棵树转化成一个大根堆.确切地说,你需要选择尽可能多的节点,满足大根堆的性质:对于任意两个点i, ...