html5＜canvas操作文字实例之转盘＞

深藏阁楼爱情的钟 2022-06-15 07:24 334阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
        canvas\{  
         background:\#ccc;  
        \}  
        </style>  
        <script>  
            window.onload = function()\{  
                var canvas = document.getElementById('canvas');  
                var cobj = canvas.getContext('2d');//获取绘图环境  
                cobj.translate(300, 300);  
                var textArr = \['手机','电脑','相机','耳麦','蓝牙','眼镜','电视','电话'\];  
                //绘制扇形  
                var colorArr = \['\#434343','\#ee1121','\#905812','\#543aa6','\#54ccca','\#34308e','\#8880a1','\#43543c'\];  
                var angle=0;  
                var step = 1000+10\*Math.random();  
                var btn = document.getElementById('btn');  
                btn.onclick = function()\{  
                    location.reload();  
                \}  
                var t = setInterval(function()\{  
                    document.title = angle;  
                    if(step <= 0.02)\{  
                        clearInterval(t);  
                        var textNum = Math.ceil((angle%360)/45);  
                        var text = textArr\[textArr.length - textNum-1\];  
                        cobj.font = "20px 微软雅黑";  
                        cobj.textAlign = "center";  
                        cobj.fillText("奖品是:"+text,0,0);  
                    \}else\{  
                        cobj.clearRect(-300,300,500,500);  
                        cobj.beginPath();  
                        cobj.lineWidth = 5;  
                        cobj.moveTo(135, 0);  
                        cobj.lineTo(145,0);  
                        cobj.stroke();  
                        cobj.lineWidth = 2;  
                        cobj.save();  
                        step \*=0.98  
                        angle +=step;//使角度增加量越来越少，加速度越来越小  
                        cobj.rotate(angle\*Math.PI/180);  
                        for(var i=1;i<=8;i++)\{  
                            cobj.beginPath();  
                            cobj.moveTo(0,0);  
                            cobj.fillStyle = colorArr\[i-1\];  
                            cobj.arc(0,0,130,(i-1)\*45\*Math.PI/180,i\*45\*Math.PI/180);  
                            cobj.closePath();  
                            cobj.stroke();  
                            cobj.fill();  
                        \}  
  
                        //绘制中心小圆盘  
                        cobj.beginPath();  
                        cobj.fillStyle = 'white';  
                        cobj.arc(0,0,60,0,2\*Math.PI);  
                        cobj.stroke();  
                        cobj.fill();  
  
                        //添加文字  
                        for(var i=1;i<=8;i++)\{  
                            cobj.save();  
                            cobj.beginPath();  
                            cobj.rotate((i\*45+30)\*Math.PI/180);  
                            cobj.fillStyle = 'black';  
                            cobj.font = "18px 微软雅黑";  
                            cobj.textBaseline = "bottom";  
                            cobj.fillText(textArr\[i-1\],75,0);  
                            cobj.restore();  
                        \}  
                        cobj.restore();  
                    \}  
                \}, 6);  
  
            \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=600 height=600>  
    </canvas>  
    <input type="button" value="点击" id="btn"/>  
    </body>

</html>

![Center][]

[Center]: /images/20220615/7460a148793f4458b09587ef4e94b832.png