jquery显示仪表盘效果代码-html代码-BFW代码库

jquery显示仪表盘效果代码

代码语言：html

所属分类：进度条

代码描述：jquery显示仪表盘效果代码

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>jQuery仪表盘进度条</title>
</head>
<body>

<canvas style="display:inline-block;width: 150px" id="canvas1"></canvas>
<canvas style="display:inline-block;width: 150px" id="canvas2"></canvas>
<canvas style="display:inline-block;width: 150px" id="canvas3"></canvas>
<input type="button" value="刷新" onClick="refresh()"/>



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
(function($){
	const flush = function(score,option) {
		let preScore = this.data("preScore")?this.data("preScore"):0;
		let radius = option.radius; //圆的半径
		let angle = option.angle;

	    let canvas = this[0];
	    let ctx = canvas.getContext('2d');
	    let width = radius*2+option.progresslineWidth*2;
	    let addHeight = Math.sin(angle*2*Math.PI/360)*(radius+option.progresslineWidth);
	    let height = radius+addHeight+option.progresslineWidth;
	    this.attr("width",width);
		this.attr("height",height);
	    let addPI = angle*Math.PI/180;
	    ctx.translate(width/2,height-addHeight);
        function draw(flag){
        	ctx.save();
	        ctx.clearRect(-width/2, -height, width, height+addHeight);
	        ctx.beginPath();
	        ctx.strokeStyle = option.progresslineColor;
	        ctx.lineWidth=option.progresslineWidth;
	        ctx.arc(0,0,radius,Math.PI-addPI,2*Math.PI+addPI);
	        ctx.stroke();

	        let stepRadian = (Math.PI+addPI*2)/option.max;//步长弧度
	        ctx.beginPath();
	        ctx.strokeStyle = option.progressColor(preScore);
	        let tempScore = preScore>option.max?option.max:preScore;
	        ctx.arc(0,0,radius,Math.PI-addPI,stepRadian*tempScore-addPI+Math.PI);
	        ctx.stroke();

        	ctx.beginPath();
        	ctx.font="70px Microsoft yahei";    
	        ctx.textAlign="center"; 
	        ctx.fillText(option..........完整代码请登录后点击上方下载按钮下载查看