这里我们使用两个Canvas进行转盘的绘画

canvas1用于绘画背景,Canvas2用于指针的转动;

把Canvas2背景设为透明并使用相对布局定位:

#myCanvas2{
position: absolute;
background-color: transparent;
top:8px;
display:block;
}
<html>
<head>
<meta charset="utf-8">
<title>转盘</title>
<style>
#myCanvas1{
cursor:default;
}
#myCanvas2{
position: absolute;
background-color: transparent;
top:8px;
display:block
}
</style>
</head>
<body>
<canvas id="myCanvas1" name="myCanvas1" width="320px" height="320px"></canvas>
<canvas id="myCanvas2" name="myCanvas2" width="320px" height="320px"></canvas>
<button onclick="start()" id="start">重新</button>
</body>
</html>
<script>
var t=50;
var ID1=null;
var ID2;
//用于当t为0时,还要转动多少次才减速来设置随机
var times;
//statu状态为0:t--;1:t++;2:t=0
var statu=0;
var ctx=document.getElementById("myCanvas1").getContext("2d");
var ctx2=document.getElementById("myCanvas2").getContext("2d");
var bg=new Image();
bg.src="1.png";
//如果不使用onload而直接drawImage()在chrome中可能无法显示出来
bg.onload=function()
{
ctx.drawImage(bg,0,0);
}
var gang=new Image();
gang.src="2.png";
gang.onload=function(){
  //把canvas2的原点坐标设为(160,160),即canvas1的中心
ctx2.translate(160,160);
  //第二张图的大小为33*69,自己算一下位置吧
ctx2.drawImage(gang,-16,-70);
}
function start()
{
times=Math.floor(Math.random()*16+1);
document.getElementById("start").disabled=true;
ID2=setInterval(
function(){
if(statu==0)
{
t--;
if(t==0)
{
statu=2;
}
if(t<0)
{
statu=1;
}
}
else if(statu==1)
t++;
else if(statu==2)
{
if(times>0)
{
t=0;
times--;
}
else
statu=1;
}
if(t>60)
{
clearInterval(ID1);
clearInterval(ID2);
statu=0;
t=50;
document.getElementById("start").disabled=false;
return ;
}
if(ID1)
clearInterval(ID1);
       //每隔一定时间对canvas2进行擦写并重绘第二幅图
ID1=setInterval(function(){
ctx2.clearRect(-160,-160,320,320);
ctx2.rotate(22.5 * Math.PI / 180);
ctx2.drawImage(gang, -16, -70);
},t);
},100);
}
</script>

注:html5中translate的作用是把canvas的原点移动指定的位置,rotate的作用是把canvas按原点旋转一定角度

初学HTML5也是第一次做转盘,逻辑和图片都有点上不了台面,只是提供个想法,不喜勿喷啊

HTML5 简易转盘的更多相关文章

  1. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

  2. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  3. HTML5抽奖转盘

    在线演示 本地下载

  4. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  5. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  6. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  7. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  8. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  9. html5学习之旅-html5的简易数据库开发(18)

    实际上是模拟实现html5的数据库功能,用键值对的方式. !!!!!!废话不多说 ,代码 index.html的代码 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. C# 获取文件路径

    1.C# 获取文件路径:http://www.cnblogs.com/bq-blog/archive/2012/09/01/2666394.html

  2. 【好文要转】HTTP图解(大牛必经之路)

    http://www.cnblogs.com/aylin/p/6221436.html

  3. css 清除浮动最佳方法!

    .clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1}

  4. 微信App支付通知验签

    微信异步通知: [AcceptVerbs("POST")] public void Notify() { //编码(101-登录无效,102-账号无效,200-成功,201-失败, ...

  5. mina IoBuffer

    mina IoBuffer 常用方法   Limit(int) 如果position>limit, position = limit,如果mark>limit, 重置mark Mark() ...

  6. 循环结构——whlie do whlie for for each

    1.  while循环  while(循环条件){       (特点为:先判断再执行) 循环操作  } 例题:  计算1+2+3+...+100 int i = 1; int sum = 0; wh ...

  7. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  8. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  9. 升级到VS2012,reportViewer无法使用

    最近公司的开发环境升级到VS2012,为了电脑能够快点,我重装系统,只装VS2012没有装VS2010.这个时候问题来了,原本用VS2010开发的项目用VS2012编译能通过,运行时包下图错: 为了解 ...

  10. 关于读取txt文件中文乱码问题

    在处理文件的过程中,读取txt文件出现中文乱码.这种情况是由于编码字符不一致导致. public static string ReadFile(string path, string fileName ...