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

随机推荐

Objective-C中 ==、isEqual、isEqualToString判断字符串相等
图片发自简书App 在判断一个字符串类型的变量是否与某字符时相等,你可能写下这样一行代码 if (activityType == @"0"){} //activityType是某一 ...
Sub-process /usr/bin/dpkg returned an error code (1)错误解决办法
之前通过wine安装了一款软件,不经常用,也没有拆卸可是之后呢,每次更新都要提示更新那个软件,更新的时候又总是找不到更新源无奈之下,我通过软件中心移除wine,没想到竟然碰到依赖问题,没有拆卸成功 ...
FireFox中使用showModalDialog显示的对话框不能用window.close()关闭
FireFox中使用 showModalDialog 显示的对话框不能用 window.close() 进行关闭: 是FireFox的配置问题,解决方法如下: 在FireFox地址栏里输入 about ...
Xcode经常使用插件使用及自己主动生成帮助文档
*一.Xcode 插件下载:* VVDocumenter下载:https://github.com/onevcat/VVDocumenter-Xcode Xcode经常使用插件下载:http://pa ...
D3D 点列练习
画四个点在窗体. #pragma once #pragma comment(lib,"d3d9.lib") #pragma comment(lib,"d3dx9.lib& ...
从 BM 到 RBM
1. 拓扑结构上如下图示,在拓扑结构上,RBM(受限的玻尔兹曼机)与 BM(玻尔兹曼机)的最大区别在于: RBM 取消了可见层的层内连接以及隐含层的层内连接,主要在于 BM 的层内连接使得其学习过程 ...
Mybatis找不到参数错误：There is no getter for property named 'categoryId' in 'class java.lang.Integer'。
Mybatis找不到参数错误:There is no getter for property named 'categoryId' in 'class java.lang.Integer'. 错误Li ...
数据挖掘之分类算法---knn算法(有matlab样例)
knn算法(k-Nearest Neighbor algorithm).是一种经典的分类算法. 注意,不是聚类算法.所以这样的分类算法必定包含了训练过程. 然而和一般性的分类算法不同,knn算法是一种 ...
Spring学习笔记之六（数据源的配置）
1.前言上一篇博客分析了,Spring中实现AOP的两种动态代理的机制,以下这篇博客.来解说一下Spring中的数据源的配置. 2.DAO支持的模板类 Spring提供了非常多关于Dao支持的模板 ...
css中背景字体文体属性练习
@charset "utf-8"; body{ background-color:#332244;/*//背景颜色*/ background-image:("../kk. ...

html5 命运之轮生产

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

随机推荐

热门专题