<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas>

<script>

    function turnTable(R,r,length){

        //这四行都是获取canvas环境的。

        var canvas=document.getElementById("canvas");

        canvas.width=2*R;

        canvas.height=2*R;

        var context=canvas.getContext("2d");

        //这个是参数，很重要的参数。错了一个就死翘翘了。

//        var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]

//        var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]

        //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。

        //translate是变换，把转盘移到中间。

        context.translate(R,R)

        //绘制转盘路径并画出来。

        for(var i=0;i<length;i++) {

            //设置每块的颜色。这个可以去掉，只是为了区分

            var RIGOU=Math.round(Math.random()*255)

            var G=Math.round(Math.random()*255)

            var B=Math.round(Math.random()*255)

            var color="rgba("+RIGOU+","+G+","+B+",0.9)"

            //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。

            var everyRad=(2*Math.PI)/length

            var rad=everyRad*i

            var nextRad=everyRad*(i+1)

            context.beginPath()

            //绘制路径。最难搞的东西。

            context.lineTo(r*Math.cos(rad), r*Math.sin(rad))

            context.lineTo(R*Math.cos(rad), R*Math.sin(rad))

            context.arc(0, 0, R, rad, nextRad, false)

            context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))

            context.arc(0, 0, r, nextRad, rad, true)

            context.closePath()

            //填充路径颜色

            context.fillStyle = color

            context.fill()

        }

    }

    //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。

    turnTable(300,80,10)

</script>

</body>

</html>

上面的是转盘的代码。接下来这个是有空隙的转盘代码。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="canvas">你的浏览器版本太低不支持HTML5</canvas>

<script>

    function turnTable(R,r,length){

        //这四行都是获取canvas环境的。

        var canvas=document.getElementById("canvas");

        canvas.width=2*R;

        canvas.height=2*R;

        var context=canvas.getContext("2d");

        //这个是参数，很重要的参数。错了一个就死翘翘了。

//        var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]

//        var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]

        //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。

        //translate是变换，把转盘移到中间。

        context.translate(R,R)

        context.scale(0.5,0.5)

        //绘制转盘路径并画出来。

        var flag=0

        for(var i=0;i<length;i++) {

            //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。

            var everyRad=(2*Math.PI-1)/length

            var rad=(everyRad)*i+0.1*flag

            flag++

            var nextRad=(everyRad)*(i+1)+0.1*flag

            flag++

            context.beginPath()

            //绘制路径。最难搞的东西。

            context.moveTo(r*Math.cos(rad), r*Math.sin(rad))

            context.lineTo(R*Math.cos(rad), R*Math.sin(rad))

            //这里加了一个十分重要的参数！！！十分重要！！！0.058十分重要！！！

            context.arc(0, 0, R, rad, nextRad+0.058, false)

            context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))

            context.arc(0, 0, r, nextRad, rad, true)

            context.closePath()

            //填充路径颜色

            context.fillStyle = "#6AD16A"

            context.fill()

        }

    }

    //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。

    turnTable(200,80,5)

</script>

</body>

</html>

最后的这个则是加了简单定时器实现抽奖的转盘代码。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="canvas" class="canvas">你的浏览器版本太低不支持HTML5</canvas>

<a href="javascript:(void)" id="btn" style="display: block;position:absolute; left:260px;top:280px;font-size: 24px;

background-color:#419641;opacity: 0.8;padding: 10px;color: #ffffff;text-decoration: none;

">点击抽奖</a>

<script>

    function turnTable(R,r,length){

        //这四行都是获取canvas环境的。

        var canvas=document.getElementById("canvas");

        canvas.width=2*R;

        canvas.height=2*R;

        var context=canvas.getContext("2d");

        //这个是参数，很重要的参数。错了一个就死翘翘了。

//        var value_x=[1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2),0,Math.sqrt(2)]

//        var value_y=[0,Math.sqrt(2),1,Math.sqrt(2),0,-Math.sqrt(2),-1,-Math.sqrt(2)]

        //上面的参数是用枚举法表示x,y的坐标。当时忘了可以用三角函数表示圆的每个点的坐标。

        //translate是变换，把转盘移到中间。

        context.translate(R,R)

        //绘制转盘路径并画出来。

        for(var i=0;i<length;i++) {

            //设置每块的颜色。这个可以去掉，只是为了区分

            var RIGOU=Math.round(Math.random()*255)

            var G=Math.round(Math.random()*255)

            var B=Math.round(Math.random()*255)

            var color="rgba("+RIGOU+","+G+","+B+",0.9)"

            //这里是换算为弧度制计算，rad是起始弧度，nextRad是终止弧度。

            var everyRad=(2*Math.PI)/length

            var rad=everyRad*i

            var nextRad=everyRad*(i+1)

            context.beginPath()

            //绘制路径。最难搞的东西。

            context.lineTo(r*Math.cos(rad), r*Math.sin(rad))

            context.lineTo(R*Math.cos(rad), R*Math.sin(rad))

            context.arc(0, 0, R, rad, nextRad, false)

            context.lineTo(r*Math.cos(nextRad), r*Math.sin(nextRad))

            context.arc(0, 0, r, nextRad, rad, true)

            context.closePath()

            //填充路径颜色

            context.fillStyle = color

            context.fill()

        }

    }

    //调用函数。第一个参数是外圆半径，第二个是小圆半径。同时canvas画布的大小是根据外圆半径而设定。

    turnTable(300,80,8)

    var btn=document.getElementById("btn")

    btn.onclick=function(){

        var lowSpeed=20

        var temp=0

        var timer=null

        timer=setInterval(function(){

            temp+=Math.random()*20+15

            canvas.style.transform="rotate("+temp+"deg)"

        },30)

        setTimeout(function(){

            clearInterval(timer)

            timer=setInterval(function(){

                if(lowSpeed>0) {

                    lowSpeed-=0.5

                    temp += lowSpeed

                    canvas.style.transform = "rotate(" + temp + "deg)"

                }

                else{

                    clearInterval(timer)

                }

            },30)

        },1000)

    }

</script>

</body>

</html>

自己用h5写的转盘。写贴上来吧。的更多相关文章

  1. 移动端 h5 uniapp 读，写，删本地文件或sd文件

    移动端 h5 uniapp 读,写,删本地文件或sd文件 应用场景: 当我们需要做离线应用或者是加载本地文件时使用到此方法.(本篇文章给大家分享访问app私有文件目录,系统公共目录,sd外置存储的文件 ...

  2. 象写程序一样写博客：搭建基于github的博客

    象写程序一样写博客:搭建基于github的博客   前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...

  3. 《自己动手写CPU》写书评获赠书活动结果

    <自己动手写CPU>写书评获赠图书的读者有: 京东:8***2.16号哨兵.magicyu.kk6803.jddickyd.杰出的胡兵 亚马逊:徐贺.马先童.jaychen.farmfar ...

  4. SSD 为什么顺序写比随机写性能更好？

    SSD以Page为单位做读写,以Block为单位做垃圾回收,Page一般有16KB大小,Block一般有几十MB大小,SSD写数据的逻辑是: 1)将该块数据所在的Page读出 2)修改该Page中该块 ...

  5. 通过hive向写elasticsearch的写如数据

    通过hive向写elasticsearch的写如数据 hive 和 elasticsearch 的整合可以参考官方的文档: ES-hadoop的hive整合 : https://www.elastic ...

  6. 如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

    如果使用引用方式引用了js后 则不能再本地写js 因为写了后不会有效果

  7. mnesia的脏写和事物写的测试

    在之前的文章中,测试了脏读和事物读之间性能差别,下面测试下脏写和事物写之间的性能差别: 代码如下: -module(mnesia_text). -compile(export_all). -recor ...

  8. OS: 读者写者问题(写者优先+LINUX+多线程+互斥量+代码)（转）

    一. 引子 最近想自己写个简单的 WEB SERVER ,为了先练练手,熟悉下在LINUX系统使用基本的进程.线程.互斥等,就拿以前学过的 OS 问题开开刀啦.记得当年学读者写者问题,尤其是写者优先的 ...

  9. Qt侠：像写诗一样写代码，玩游戏一样的开心心情，还能领工资！

    [软]上海-Qt侠 2017/7/12 16:11:20我完全是兴趣主导,老板不给我钱,我也要写好代码!白天干,晚上干,周一周五干,周末继续干!编程已经深入我的基因,深入我的骨髓,深入我的灵魂!当我解 ...

  10. 程序代写, CS代写, 代码代写, CS编程代写, java代写, python代写, c++/c代写, R代写, 算法代写, web代写

    互联网一线工程师程序代写 微信联系 当天完成 查看大牛简介特色: 学霸代写,按时交付,保证原创,7*24在线服务,可加急.用心代写/辅导/帮助客户CS作业. 客户反馈与评价 服务质量:保证honor ...

随机推荐

  1. <jsp:include page="">和<%@include page=""%> 标签学习

    <jsp:include page=""><jsp:param value=""name=""/><DEL&g ...

  2. Object 保存到文件中

    6月4日 Object 保存到文件中  Q. 你添加一个新类到你的项目当中且你希望可以保存这个类的一个实例对象到磁盘文件 并在需要时从磁盘文件读回到内存中  A. 方案  确保你的类遵循 NSCodi ...

  3. Unity的Cover flow的实现包（2个）

    苹果的mac机上预览图片,有一个所谓的cover flow的效果,这里收集到两个,两个实现效果略有不同. 1.老外的实现 https://github.com/rakkarage/Unity3D-Co ...

  4. Centos 5.5 安装Mysql5.5过程

    这几天在centos下装mysql,这里记录一下安装的过程,方便以后查阅 Mysql5.5.37安装须要cmake,5.6版本号開始都须要cmake来编译,5.5以后的版本号应该也要装这个. 安装cm ...

  5. ios常见加密解密方法

    在其他平台中经常会计算MD5值,在iOS平台中也提供了该方法,首先需要导入头文件 #import <CommonCrypto/CommonDigest.h> 方法CC_MD5可以获取MD5 ...

  6. json接口相关（建议结合JFinal框架）

    /** * */ package net.wicp.wvqusrtg; import java.util.HashMap; import net.sf.json.JSONArray; import n ...

  7. BZOJ 2843: 极地旅行社( LCT )

    LCT.. ------------------------------------------------------------------------ #include<cstdio> ...

  8. CodeForces 22B Bargaining Table 简单DP

    题目很好理解,问你的是在所给的图中周长最长的矩形是多长嗯用坐标(x1, y1, x2, y2)表示一个矩形,暴力图中所有矩形易得递推式:(x1, y1, x2, y2)为矩形的充要条件为: (x1, ...

  9. 【Dior风格/舒适防风面料/抗静电里衬/大身撞色拼接/精致平驳领/时尚便西款/蓝绿色】玛萨玛索男装网购商城

    [Dior风格/舒适防风面料/抗静电里衬/大身撞色拼接/精致平驳领/时尚便西款/蓝绿色]玛萨玛索男装网购商城 [特价商品] Dior风格/舒适防风面料/抗静电里衬/大身撞色拼接/精致平驳领/时尚便西款 ...

  10. MySQL分组数据

    分组 理解分组能够看例如以下一个样例,首先我们打印出products表例如以下 从上面的表中能够看出.每一个vendor都有若干个产品,那么怎么一次统计每一个vendor有多少个产品呢? 这里就能够使 ...