Barra de progreso radial con JavaScript y HTML5 Canvas

Vista prévia

Descripción

Una biblioteca de JavaScript ligera y de dependencia cero que se utiliza para representar una barra de progreso radial & circular en un elemento canvas de HTML5 para presentar el valor de porcentaje que especifique.

Funcionamiento

Primero tienes que cargar el archivo JavaScript del núcleo RadialBar. js en el documento.

<script src="dist/RadialBar.js"></script>

A continuación, cree un elemento canvas de HTML5 en el que desee renderizar la barra de progreso.

<canvas id="paper"></canvas>

Configure el elemento canvas de HTML5 de la siguiente manera:

var canvas = document.getElementById('paper');
var ctx = canvas.getContext('2d');

// optional
canvas.width = 800;
canvas.height = 600;

Cree una nueva instancia de RadialBar y pase la configuración opcional como el segundo parámetro a la RadialBar () .

var progressBarOne = new RadialBar(ctx,


 {



x: 300,



y: 300,



radius: 150,



lineWidth: 40,



lineFill: '#CCB566',



backLineFill: '#FB6929',



bgFill: '#F8FF8E',



progress: 90



isShowInfoText: true,



infoStyle: '60px Arial',



infoColor: 'red'


}
);

API methods.

• Set (Val) – establecer el valor porcentual, de 0 a 100
• Add (Val) – añadir un nuevo valor, de 0 a 100
• restar (Val) – subtact el valor, de 0 a 100
• Update () – actualizar la barra de progreso a un nuevo valor
• get () – obtener el valor actual
• radianes (DEG) – devuelve el grado, DEG * Math. PI/180