|
- (function (root, factory) {
- if (typeof define === 'function' && define.amd) {
- define(factory);// AMD
- } else if (typeof exports === 'object' && typeof module !== 'undefined') {
- module.exports = factory(); // CommonJS
- } else {
- window.Progressbar = factory(); // Browser globals
- }
- }(this, function () {
- function Progressbar(options){
- this.id = options.id;
- this.value = options.value || 0;
- this.width = options.width || 200;
- this.height = options.height || 200;
- this.bgColor = options.bgColor || '#F0ECEC';
- this.barColor = options.barColor || '#F9A825';
- this.fontColor = options.fontColor || '#606266';
- this.text = options.text || '%'
- if(options.init){
- this.init();
- }
- }
- Progressbar.prototype.init = function(){
- console.log(this.id, '创建的id')
- var canvas = document.getElementById(this.id);
- console.log(canvas, '找没找到', document.getElementById(this.id))
- if(!canvas.getContext) {
- throw new Error('your browser does not support canvas')
- }
-
- if(!this.id){
- throw new Error('your need pass id ')
- }
-
- var width = parseInt(this.width);
- var height = parseInt(this.height);
- canvas.setAttribute('width',width);
- canvas.setAttribute('height',height);
-
- var ctx = canvas.getContext("2d");
-
- var startAngle = 3 / 2 * Math.PI;
- var percentage = 0;
- var diffAngle = 0;
- var cx = width / 2;
- var cy = height / 2;
- var timer = setInterval(draw, 50);
- var value = this.value;
- var bgColor = this.bgColor;
- var barColor = this.barColor;
- var fontColor = this.fontColor;
- var text = this.text;
-
- function draw(){
- diffAngle = (percentage / 100) * Math.PI * 2;
-
- //清除矩形区域
- ctx.clearRect(0, 0, width, height);
-
- ctx.beginPath();
-
- //设置线段宽度
- ctx.lineWidth = 15;
-
- //绘制圆
- ctx.arc(cx, cy, 50, 0, 2 * Math.PI, false);
-
- //设置填充色
- ctx.fillStyle = '#FFF';
- ctx.fill();
-
- //绘制图形轮廓
- ctx.strokeStyle = bgColor;
- ctx.stroke();
-
- //绘制百分比进度
- ctx.beginPath();
- ctx.arc(cx, cy, 50, startAngle, diffAngle + startAngle, false);
- ctx.strokeStyle = barColor;
- ctx.stroke();
-
- //绘制百分比文字
- ctx.fillStyle = fontColor;
- ctx.textAlign = 'center';
- ctx.font = '16px serif';
- ctx.fillText(percentage + text, cx, cy + 6);
-
- if (percentage >= value) {
- clearTimeout(timer);
- }
-
- percentage++;
- }
- }
- return Progressbar;
- }));
|