Canvas绘制转盘


思路:

1、先绘制一个扇形,通过循环绘制整个转盘

2、使用setInterval()使转盘旋转

3、在转盘上添加文字

4、转盘停止旋转时获取当前指向的文字并显示

Canvas绘制转盘

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #FF9933;}
span{ 
    width:50px; 
    height: 30px; 
    line-height: 30px;
    color:#F8F8F8;
    background: #CC3300;
    border:1px solid #000;
    text-align: center;
    position: absolute;
    top:350px;
    left:430px;
    cursor:pointer;
}
</style>
<script>
window.onload = function(){
var can = document.getElementById('canvas');
var span = document.getElementsByTagName('span')[0];
var ocan = can.getContext('2d');
ocan.translate(250,250);
drawArrow();
var arrColor = ["#F97E8F","#73AEFF","#FABE2D","#00E2E3","#C68EF5","#CC0066","#66FF00","#FFFF00"];
var arrTxt = ["javascript","html5","css3","jQuery","php","node.js","ps","java"];

var rate = Math.PI/180;
var angle = 0;
var num = 0;
var tmp = 20+10*Math.random();

span.onclick = function(){
    location.reload();//从服务器端重新载入页面 
}

var timer = setInterval(function(){
    document.title = tmp;
    if(tmp <= 0.8){
        clearInterval(timer);
        ocan.beginPath();
        num = Math.ceil(angle/45%8);//向上取整
        var num1 = arrTxt[arrTxt.length-num];
        ocan.font="15px 微软雅黑";
        ocan.textAlign="center";
        ocan.fillText(num1,0,5);
    }else{
        tmp *= 0.95;
        angle += 5+tmp;
    for(var i=0; i<arrColor.length; i++){
        angle+=45;
        ocan.save();
        ocan.beginPath();
        ocan.moveTo(0,0);
        ocan.arc(0,0,150,(angle-45)*rate,angle*rate);
        ocan.closePath();
        ocan.fillStyle = arrColor[i];
        ocan.strokeStyle = "#000";
        ocan.stroke();
        ocan.fill();
        ocan.beginPath();
        ocan.rotate((angle-20)*rate);
        ocan.fillStyle = "#000";
        ocan.font = "13px 微软雅黑";
        ocan.fillText(arrTxt[i],80,0);
        
        /*画中间小圆*/
        ocan.beginPath();
        ocan.moveTo(0,0);
        ocan.arc(0,0,50,0,360*Math.PI/180);
        ocan.closePath();
        ocan.fillStyle = "#ffffcc";
        ocan.stroke();
        ocan.fill();
        ocan.restore();
        }
    }
},100);

    /*绘制箭头*/
    function drawArrow(){
        ocan.save();
        ocan.beginPath();
        ocan.moveTo(155,0);
        ocan.lineTo(180,-20);
        ocan.lineTo(180,-7);
        ocan.lineTo(320,-7);
        ocan.lineTo(320,7);
        ocan.lineTo(180,7);
        ocan.lineTo(180,20);
        ocan.closePath();
        var color = ocan.createLinearGradient(130,0,300,0);
        color.addColorStop(0,"#CC0000");
        color.addColorStop(0.4,"#FF0099");
        color.addColorStop(0.9,"#FFCC66");
        ocan.fillStyle = color;
        ocan.strokeStyle = "#202020";
        //阴影
        ocan.shadowOffsetX = 2;
        ocan.shadowOffsetY = 2;
        ocan.shadowBlur = 4;
        ocan.shadowColor = "#FF6633";
        ocan.stroke();
        ocan.fill();
        ocan.restore();
    }
}
</script>
</head>
<body>
    <canvas id="canvas" width=750 height=500></canvas>
    <span>点我</span>
</body>
</html>



你可能感兴趣的:(canvas)