码，如以下：

<%@ 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为了控制图像做。

有兴趣的研究。

版权声明：本文博客原创文章。博客，未经同意，不得转载。

html5 命运之轮生产的更多相关文章

  1. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  2. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  3. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  4. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  5. 基于 HTML5 的 Web SCADA 报表

    背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...

  6. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  7. 哪些HTML5特性值得期待

    首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...

  8. HTML5 随机弹跳的小球

    查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...

  9. html5视频播放插件

    对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

随机推荐

  1. Multi-core compute cache coherency with a release consistency memory ordering model

    A method includes storing, with a first programmable processor, shared variable data to cache lines ...

  2. iOS开发Quartz2D十二：手势解锁实例

    一:效果如图: 二:代码: #import "ClockView.h" @interface ClockView() /** 存放的都是当前选中的按钮 */ @property ( ...

  3. 【t010】最近距离

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 聚类方法要求将空间中的点集,按照一点的方式进行归类,要求每一类中的点集相互之间的距离足够的"近 ...

  4. HTML中DOM核心知识有哪些（带实例超详解）

    HTML中DOM核心知识有哪些(带实例超详解) 一.总结: 1.先取html元素,然后再对他进行操作,取的话可以getElementById等 2.操作的话,可以是innerHtml,value等等 ...

  5. Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的！

    我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity androi ...

  6. Java泛型解析(02)：通配符限定

    Java泛型解析(02):通配符限定      考虑一个这种场景.计算数组中的最大元素. [code01] public class ArrayUtil { public static <T&g ...

  7. 初始化NSDictionary：（工作经验）两种方法有时候效果不一样

    方法1: NSMutableDictionary *dic = [[NSMutableDictionary alloc] init]; [dic setObject:[Hp_KeysArray obj ...

  8. 【BZOJ 1018】 [SHOI2008]堵塞的交通traffic

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1018 [题意] [题解] 按照这里的题解写的http://blog.csdn.net/ ...

  9. MIPS重返硅谷　放眼AI未来

    MIPS最近以一家独立公司之姿重新回到了矽谷,在Tallwood的带领下积极投入原有的嵌入式业务,并放眼下一代人工智能(AI)领域.   MIPS最近以一家独立公司之姿重新回到了矽谷——加州圣塔克拉拉 ...

  10. General-Purpose Operating System Protection Profile

    1 Protection Profile Introduction   This document defines the security functionality expected to be ...