canvas 转盘文字

canvas.js

 

window.onload=function() {
    var canvas=document.getElementById('canvas');
     var ctx=canvas.getContext('2d');
     var btn=document.getElementById('btn');
     var angle=0;

     btn.onclick=function() {
         location.reload();
     };
         var step=10+10*Math.random();
         var t= setInterval(function() {
             if(step<=0.3)  {
                 clearInterval(t);
                 var num1=Math.ceil(angle/45);
                 var con= (textArr[textArr.length-num1]);
                 ctx.font = "20px  微软雅黑 ";
                 ctx.textAlign="center";
                 ctx.fillText(con,0,0);
             }else {
                 if (angle >= 360) {
                     angle = 0;
                 }
                 step *= 0.95;
                 angle+=step;
                 ctx.clearRect(-200, -200, 500, 500);
                 ctx.beginPath();
                 ctx.lineWidth = 5;
                 ctx.moveTo(130, 0);
                 ctx.lineTo(150, 0);
                 ctx.stroke();
                 ctx.lineWidth = 2;
                 ctx.save();
                 ctx.rotate(angle * num);
                 for (var i = 1; i <= 8; i++) {
                     ctx.beginPath();
                     ctx.moveTo(0, 0);
                     ctx.arc(0, 0, 130, (i - 1) * 45 * num, i * 45 * num);
                     ctx.fillStyle = colorArr[i - 1];
                     ctx.closePath();
                     ctx.stroke();
                     ctx.fill();
                 }

                 ctx.beginPath();
                 ctx.fillStyle = "#fff";
                 ctx.arc(0, 0, 60, 0, 360 * num);
                 ctx.fill();

                 for (var i = 0; i <= 7; i++) {
                     ctx.save();
                     ctx.beginPath();
                     ctx.rotate((i * 45 + 20) * num);
                     ctx.fillStyle = "black";
                     ctx.font = "15px  微软雅黑 ";
                     ctx.fillText(textArr[i], 70, 0);
                     ctx.restore();
                 }
                 ctx.restore();
             }

         },60);


    var num=Math.PI/180;
     ctx.translate(250,250);
     var colorArr=["#B23AEE","#BC8F8F","#A0522D","#8B1A1A","#FF4500","#FFFF00","#8B8B7A","#00EE00"];
     var textArr=["PHP","HTML5","JAVA","JS","CSS","CSS3","JQUERY","HTML"];


};

 

　　canvas.html

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>实例</title>
    <script  type="text/javascript"  src="canvas.js"></script>
    <style>
        canvas {
            background: #eeeeee;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<input type="button"   value="开始" id="btn">
</body>
</html>

 

　　效果：

 

 

 

 2017-09-11  12:06:02

posted @ 2017-09-11 12:06  1点  阅读(458)  评论(0)    收藏  举报