关闭

css3实现抽奖装盘效果

标签: css3transition抽奖转盘
243人阅读 评论(0) 收藏 举报

演示如下:



代码如下:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
<title>无标题文档</title>
<style>
   #main{
    display: block;
    padding:30px;
   }

   #triangle{
    position: absolute;
    left: 78px;
    top: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid blue;
   }

   canvas{
    transition: all 3s;
   }

   #tip{
    font-size: 30px;
    color: blue;
    margin:15px 0; 
   }

   #result{
    font-size: 30px;
    color: red;
    margin:15px 0; 
   }
</style>
</head>    
<body>
<div id="main">
   <div id="triangle"></div>
   <canvas id="mycanvas" width="100" height="100"></canvas>
   <div id="tip">点击装盘开始抽奖</div>
   <div id="result"></div>
</div>
<script type="text/javascript">
  var canvas=document.getElementById('mycanvas');
  var ctx=canvas.getContext('2d');
  ctx.fillStyle="red";
  ctx.arc(50,50,50,0,2*Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(50,0);
  ctx.lineTo(50,100);
  ctx.moveTo(0,50);
  ctx.lineTo(100,50);
  ctx.stroke();
  ctx.closePath();
  ctx.fillStyle="black";
  ctx.font="14px Georgia";
  ctx.fillText("手机",20,30);
  ctx.fillText("电脑",60,30);
  ctx.fillText("美女",20,70);
  ctx.fillText("汽车",60,70);

  var result=document.getElementById('result');
  canvas.onclick=function(){
     var deg=Math.random()*360+720;
     canvas.style.transform="rotate("+deg+"deg)";
     setTimeout(showResult,3100);
     function showResult(){
      if(deg-720<90){
        result.innerHTML="恭喜你抽到了手机";
      }else if(deg-720>=90&°-720<180){
        result.innerHTML="恭喜你抽到了美女";
      }else if(deg-720>=180&°-720<270){
        result.innerHTML="恭喜你抽到了汽车";
      }else if(deg-720>=270){
        result.innerHTML="恭喜你抽到了电脑";
      }
    }
  }

</script>
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6548次
    • 积分:239
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:8篇
    • 评论:0条
    文章存档