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

2022-10-10 08:03:45

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

码农公寓

相关文章