本身用h5寫的轉盤。寫貼上來吧。

時間 2019-11-20

標籤本身 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>

上面的是轉盤的代碼。接下來這個是有空隙的轉盤代碼。javascript

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

最後的這個則是加了簡單定時器實現抽獎的轉盤代碼。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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。