HTML5 简易转盘

这里我们使用两个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也是第一次做转盘，逻辑和图片都有点上不了台面，只是提供个想法，不喜勿喷啊

posted @ 2013-07-03 11:51  唐好酸  阅读(2851)  评论(0)    收藏  举报