zoukankan html css js c++ java

自己用h5写的转盘。写贴上来吧。

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

查看全文

相关阅读:
20135313_exp4
20135313_exp5
学习分块
 学习BM算法
 学习笛卡尔树
 【数学】Eddy Walker
【bitset】Kth Minimum Clique
【搜索】n的约数
 【搜索】Partition problem
【信息学奥赛一本通提高组】第四章广搜的优化技巧

原文地址：https://www.cnblogs.com/jelly7723/p/4902313.html