html中怎么把div做的扇形放在固定位置以及控制扇形角度大小

JavaScript016

html中怎么把div做的扇形放在固定位置以及控制扇形角度大小,第1张

我的思路是这样的：

用圆角属性做出扇形，再用一个矩形去遮挡

宽高相等画出正方形

加border-radius属性做出1/4圆或者1/2圆

矩形旋转

例如transform: rotate(45deg) 顺时针旋转45度

以上都在一个position:relative的父元素中，要旋转的矩形position:absolute

用js控制矩形旋转的角度，应该就可以了

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="cvs" width="200" height="200"></canvas>

<script>

//扇形对象

CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {

    // 初始保存

    this.save()

    // 位移到目标点

    this.translate(x, y)

    this.beginPath()

    // 画出圆弧

    this.arc(0,0,radius,sDeg, eDeg)

    // 再次保存以备旋转

    this.save()

    // 旋转至起始角度

    this.rotate(eDeg)

    // 移动到终点，准备连接终点与圆心

    this.moveTo(radius,0)

    // 连接到圆心

    this.lineTo(0,0)

    // 还原

    this.restore()

    // 旋转至起点角度

    this.rotate(sDeg)

    // 从圆心连接到起点

    this.lineTo(radius,0)

    this.closePath()

    // 还原到最初保存的状态

    this.restore()

    return this

}

//执行

function start(degrees){

    var ctx = document.getElementById('cvs').getContext('2d')

    degrees++

    ctx.sector(100,100,50,0,Math.PI/180*degrees).fill()

    if(degrees<360){

        setTimeout('start('+degrees+')',10)

    }else{

        alert('画完了')

    }

}

start(1)

</script> 

</body>

</html>