您的位置：首页 > Web前端 > HTML5

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

2017-05-27 10:31 274 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航