1. 程式人生 > >html5 製作幸運大轉盤

html5 製作幸運大轉盤

程式碼如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>購買大廳</title>
<%@include file="../../include/include.jsp"%>
<%@include file="../../include/main.jsp"%>
<body style="background-color: #514f4f;overflow: hidden;">
<div class="nav" style="height:43px;line-height:43px;background-color: #CC0000;display:block;"><p>幸運大轉盤</p>
 <span class="bank"><a href="javascript:window.history.go(-1);" class="hand">返回</a></span>
</div>
<div style="width: 100%;padding-top:50px;">
 <p style="margin:0px auto;line-height:20px;padding:5px 5px;width:95%;color: #747373;font-size:14px;background-color: #dedede;">遊戲規則:每次轉動消費10積分,中獎後系統記錄,客服會與您第一時間取得聯絡!</p>
</div>
<div style="padding:5px 0px 0px 15px;">
   <p><span style="font-size:16px;color:#fff;position: relative;top:10px;">當前積分1000</span> <input id="spinBtn" type="button" onclick="spin();" value="開始抽獎" class="luckBtn" style="margin-top: 3px;"></p>
</div>
<div style="width: 100%;text-align: center;margin:0px auto;">
<canvas id="wheelcanvas" width="500" height="500"></canvas> 
</div>
<script type="application/javascript"> 
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
              "#2E2C75", "#673A7E", "#CC0071", "#F80120",
              "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
  var restaraunts = ["X2", "X4", "X5", "繼續努力","雙色球一注","5000元現金","iphone6一臺","蘋果筆記本一臺"];
  
  var startAngle = 0;
  var arc = Math.PI / 4;
  var spinTimeout = null;
  
  var spinArcStart = 10;
  var spinTime = 0;
  var spinTimeTotal = 0;
  var winWidth=500;
  var ctx;
  function draw() {
    drawRouletteWheel();
  }
  var windowWidth=0;
	if((document.body) && (document.body.clientWinWidth)){
		windowWidth = document.body.clientWinWidth;
	}else if(window.innerWidth){
		windowWidth = window.innerWidth;
	}
  if(windowWidth!=0&&windowWidth<400){
		 $("#wheelcanvas").width(320);
		 $("#wheelcanvas").height(320);
	 }
  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = winWidth*0.4;
      var textRadius = winWidth*160/500;
      var insideRadius = winWidth*125/500;
      
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,winWidth,winWidth);
      
//       var pic = new Image();  
//       pic.width=500;
//       pic.onload=function(){  
//     	  ctx.drawImage(pic,0,0,500,500);  
//       }          
<%--       pic.src ="<%=basePath%>/resources/images/touch/pan.gif";      --%>

      ctx.strokeStyle = "#CFCFCF";
      ctx.lineWidth = 2;
      
      ctx.font = 'bold 16px sans-serif';
      ctx.fillStyle = "#fff";
      ctx.arc(winWidth/2, winWidth/2, outsideRadius+15,0,2*Math.PI,true);
      ctx.stroke();
      ctx.fill();
      ctx.save();
      for(var i = 0; i < 8; i++) {
        var angle = startAngle + i * arc;
        
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.arc(winWidth/2, winWidth/2, outsideRadius, angle, angle + arc, false);
        ctx.arc(winWidth/2, winWidth/2, 10, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
        ctx.save();
/*      ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";*/
        ctx.fillStyle = "#FFF";
        ctx.translate(winWidth/2 + Math.cos(angle + arc / 2) * textRadius, winWidth/2 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = restaraunts[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore(); 
      }
      //Arrow
      ctx.fillStyle = "white";
      ctx.beginPath();
      ctx.moveTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));
      ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius + 5));
      ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius - 5));
      ctx.lineTo(winWidth/2 + 9, winWidth/2 - (outsideRadius - 5));
      ctx.lineTo(winWidth/2 + 0, winWidth/2 - (outsideRadius - 23));
      ctx.lineTo(winWidth/2 - 9, winWidth/2 - (outsideRadius - 5));
      ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius - 5));
      ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));
      ctx.fill(); 
    }
  }
  function spin() {
	$("#spinBtn").attr("disabled","true");
    $("#spinBtn").css("background","grey");
    spinAngleStart = Math.random() * 10 + 30;
    spinTime = 0;
    spinTimeTotal = Math.random() * 4 + 5 * 1000;
    rotateWheel();
  }
  
  function rotateWheel() {
    spinTime += 20;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 20);
  }
  
  function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = restaraunts[index]
    ctx.fillText(text, winWidth/2 - ctx.measureText(text).width / 2, winWidth/2 + 10);
    ctx.restore();
	$("#spinBtn").removeAttr("disabled");
	$("#spinBtn").css("background","#CC0000");
  }
  
  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }
  
  draw();
</script>
<body>
</html>
效果如下:

自己在網上找到一些例子,自己改了改,用html5的canvas實現的;

也有幾種思路,就是用css的border 和圓角來做的,然後用css的rotate等函式來做

還有就是jquery外掛控制圖片來做的

還有就是用css來控制圖片來做的。

有興趣可以研究。