range+标签+html5,使用cavan标签+rangeSlider滑块插件动态调整扇形区域

先看Domel效果

代码

@section Styles{

}

动态调整扇形区大小

@section scripts{

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(); //绘制已定义的路径

}

}

标签：function,插件,bg,cxt,滑块,cavan,路径,var,100

来源： https://blog.csdn.net/qq_42335551/article/details/84968914