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 ElementById("myCanvas1").getContext("2d");
var ElementById("myCanvas2").getContext("2d");
var bg=new Image();
bg.src="1.png";
//如果不使⽤onload⽽直接drawImage()在chrome中可能⽆法显⽰出来
html实现用户注册登录代码
{
ctx.drawImage(bg,0,0);
}
var gang=new Image();
gang.src="2.png";
  //把canvas2的原点坐标设为（160,160），即canvas1的中⼼
  //第⼆张图的⼤⼩为33*69，⾃⼰算⼀下位置吧
ctx2.drawImage(gang,-16,-70);
}
function start()
{
times=Math.floor(Math.random()*16+1);
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;
return ;
}
if(ID1)
clearInterval(ID1);
      　//每隔⼀定时间对canvas2进⾏擦写并重绘第⼆幅图
ID1=setInterval(function(){
ctx2.clearRect(-160,-160,320,320);
ctx2.drawImage(gang, -16, -70);
},t);
},100);
}
</script>
注：html5中translate的作⽤是把canvas的原点移动指定的位置，rotate的作⽤是把canvas按原点旋转⼀定⾓度初学HTML5也是第⼀次做转盘，逻辑和图⽚都有点上不了台⾯，只是提供个想法，不喜勿喷啊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。