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 ...

随机推荐

mjpg-streamer摄像头远程传输UVC
mjpg-streamer摄像头远程传输UVC 1 下载源代码 mjpg-streamer的源代码地址 https://github.com/codewithpassion/mjpg-streame ...
ios开发网络学八：NSURLSession相关代理方法
#import "ViewController.h" @interface ViewController ()<NSURLSessionDataDelegate> /* ...
jdbc之二：DAO模式分类： B1_JAVA 2014-04-29 15:13 1536人阅读评论(0) 收藏
详细代码请参见 https://github.com/lujinhong/dao 一.前期准备 1.创建数据库 create database filter_conf; 2.创建表并插入数据 crea ...
超级牛X的免费开源小工具之tldr
github介绍:http://tldr-pages.github.io/ github源码:https://github.com/tldr-pages/tldr 什么是tldr? 新命令行世界?还是 ...
解决Centos7 下 root账号远程连接FTP，vsftpd 提示 530 Login incorrect 问题
原文:解决Centos7 下 root账号远程连接FTP,vsftpd 提示 530 Login incorrect 问题三步走: 1.vim /etc/vsftpd/user_list 注释掉 ...
【u030】扑克牌
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的 ...
ie7easyui的书写要规范
在书写easyui对象的属性,有时候习惯在,属性的末尾再加一个“,”,这个在高版本浏览器是没事的,但是在ie7及以下,会有报错
[Node.js] Initialize a LoopBack Node.js Project through the CLI
LoopBack is a framework built on top of Express for creating APIs. It allows you to create end-to-en ...
[NPM] Pipe data from one npm script to another
In an effort to bypass saving temporary build files you can leverage piping and output redirection t ...
[Thu, 9 Jul 2015 ~ Tue, 14 Jul 2015] Deep Learning in arxiv
这一期的神作论文有蛮多的,都很有意思. Feature Representation In ConvolutionalNeural Networks 该论文中论述了在某种CNN结构下,是否有准确率较高 ...

html5 命运之轮生产

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

随机推荐

热门专题