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

有兴趣的研究。

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

基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统
前言大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...
nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
来吧，HTML5之基础标签(上)
什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签定义超链接, ...
脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
基于 HTML5 的 Web SCADA 报表
背景最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...
实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
哪些HTML5特性值得期待
首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...
HTML5 随机弹跳的小球
查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm Chrome效果图: 火狐效果图:推荐:http://hovertree.com/texiao/css3/18/ ...
html5视频播放插件
对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

随机推荐

PatentTips - Highly-available OSPF routing protocol
BACKGROUND OF THE INVENTION FIG. 1A is a simplified block diagram schematically representing a typic ...
ios开发多线程二：NSOperationQueue的基本使用
#import "ViewController.h" #import "XMGOperation.h" @interface ViewController () ...
用Java对CSV文件进行读写操作
需要jar包:javacsv-2.0.jar 读操作 // 读取csv文件的内容 public static ArrayList<String> readCsv(String filepa ...
System.Xml.XmlException: 引用了未声明的实体“nbsp”
在XML文件中<, >,&等有特殊含义,(前两个字符用于链接签,&用于转义),不能直接使用.使用这些个字符时,应使用它们的转义序列,下面是5个在XML文件中预定义好的实体: ...
适合前端开发的 Chrome 扩展有哪些？（十款）
适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...
数据结构与算法——常用数据结构及其Java实现
前言仿佛一下子,2017年就快过去一半了,研一马上就要成为过去式了,我打算抓住研一的尾巴,好好梳理一下数据结构与算法,毕竟这些基础知识是很重要的嘛.所以准备在这里搞一个系列的文章,以期透彻. 本系列 ...
5.3.3.1 deque其他使用方式
在本节里提供了一些关于deque其他使用方式. 提供相似UNIX中的命令tail的功能,显示一个文件最后面一段文本: def tail(filename, n=10): '返回文件最后的n行文本' w ...
概念的理解 —— 奇点（singularity point）、第一性原理（first principle）
奇点(singularity point)一词出现在不同的环境里,对应着不同的含义: wikipedia:Singularity 文艺作品: 未来学(Futurology):比如雷·库兹韦尔的< ...
轻松学习JavaScript十八：DOM编程学习之DOM简单介绍
一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...
使用蒲公英来发布iOS内侧版本
1.生成ipa包这里不介绍正规的打包方式(选择真机调试-编译成功以后-工具product-archive-....) 下面介绍快速打包方式: 1)选择真机调试-编译成功以后右击下图.app文件,选择 ...

html5 命运之轮生产

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

随机推荐

热门专题