使用cavas标签+rangeSlider滑块插件动态调整扇形区域

先看Domel效果

代码

@section Styles{
<link href="~/Content/rangeSlider_css/ion.rangeSlider.css" rel="stylesheet" />
<link href="~/Content/rangeSlider_css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" />
    }
<h2>动态调整扇形区大小</h2>
  <canvas id="bg" width="200" height="200" style="border:1px solid red;"></canvas>
<div style="width: 60%;">
    <div id="costRange"></div>
</div>     
@section scripts{
    <script src="~/Scripts/rangeSlider_js/ion-rangeSlider/ion.rangeSlider.min.js"></script>
<script>
    var bg = document.getElementById('bg');
    var cxt = bg.getContext('2d'); //创建context对象
    cxt.fillStyle = '#FF0000'; //设置或返回用于填充绘画的颜色、渐变或模式 染成红色
    cxt.strokeStyle = "#ff0000"; //设置或返回用于笔触的颜色、渐变或模式
    $(function () {
        $("#costRange").ionRangeSlider({
            type: "double",
            grid: true,
            min: 0,
            max: 360,
            from: 0,
            to: 30,         
            postfix: "度数"
        });
        draw(0, 30);
     
        $("#costRange").on("change", function () {
            var $this = $(this),
            value = $this.prop("value");
            var arr = value.split(";")
            draw(arr[0], arr[1]);
        });
    })
    function draw(start, end) {
        Close();
        Defultdraw();
        cxt.beginPath(); //起始一条路径，或重置当前路径
        cxt.moveTo(100, 100);//设置默认起始点
        console.warn("start:" + start); console.warn("end:" + end);
        cxt.arc(100, 100, 80, start * Math.PI / 180, end * Math.PI/180, false); //绘制一个中心点为（100,100），半径为80
        cxt.closePath(); //创建从当前点回到起始点的路径
        cxt.fill();//填充当前绘图（路径）  
        cxt.stroke(); //绘制已定义的路径
    }
    function Close() {
        var width = bg.width;
        var height = bg.height;
        cxt.clearRect(0, 0, width, height);
    }
    //默认空心圆
    function Defultdraw() {
        cxt.beginPath(); //起始一条路径，或重置当前路径
        cxt.arc(100, 100, 80,0, 2* Math.PI, false); //绘制一个中心点为（100,100），半径为80
        cxt.closePath(); //创建从当前点回到起始点的路径
        cxt.stroke(); //绘制已定义的路径
    }
</script>
}