这里我们使用两个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. DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装

    打开VS2015,出现 “DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装,该解决方案将对此会话使用DNX SDK版本“dnx-clr-win-x86.1.0.0 ...

  2. HTTP、TCP、UDP以及SOCKET之间的区别/联系

    一.TCP/IP代表传输控制协议/网际协议,指的是一系列协组. 可分为四个层次:数据链路层.网络层.传输层和应用层. 在网络层:有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在 ...

  3. JavaWeb 学习006-4个页面，5条sql语句(添加、查看、修改、删除)

    今天遇到的问题: 1. 在list页面上添加信息时候,跳转到doAdd页面后,点击保存按钮,能够跳转回list页面,但是新增的信息不能显示出来,就像是没有执行添加操作一样. 这是什么问题? ①是不是到 ...

  4. git 常见命令

    查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...

  5. configparser配置文件操作

    configparser 模块用于对配置操作  官方文档地址https://docs.python.org/3/library/configparser.html 导入configparser模块 i ...

  6. C#图片压缩处理算法

    原文链接:http://blog.csdn.net/szstephenzhou/article/details/38900345

  7. Git 在团队中的最佳实践--如何正确使用Git Flow[转]

    原文地址:http://www.cnblogs.com/cnblogsfans/p/5075073.html Git的优点 Git的优点很多,但是这里只列出我认为非常突出的几点. 由于是分布式,所有本 ...

  8. Docker学习<一>--初体验Windows环境下安装

    背景 今天想试用spring boot与jwt协议的实现,配套就需要使用redis,但redis似乎windows环境版本部署起来不是那么舒心,果断尝试使用docker. 下载 下载地址: 稳定版:h ...

  9. Oracle 学习方法

    参考书籍: oracle实用教程 pdf 深入浅出Oracle: DBA入门.进阶与诊断案例.pdf Oracle 认证 Dba 认证: Oca  oracle 初级dba 认证(容易) Ocp  o ...

  10. php框架制做笔记

    在学习完基础之后,最好的提高方式是做一个自己的框架,因为框架会用到各个知识点,在制做过程中,复习,巩固,提高. 在框架中,因为是单入口,整个脚本运行时都存在的变量我们应该设为静态变量,这样它在每个地方 ...