css3实现抽奖装盘效果

最新推荐文章于 2023-12-02 15:06:02 发布

追星逐月丶

最新推荐文章于 2023-12-02 15:06:02 发布

阅读量587

点赞数

文章标签： css3 transition 抽奖转盘

本文链接：https://blog.csdn.net/qq_22187867/article/details/51542282

版权

演示如下：

代码如下：

<!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.οnclick=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>