Jquery 使用画布创建循环倒计时计时器

有很多circle进度条插件，但没有一个是我需要的。基本上所有的插件都是从0度到360度或0到270度之类的。我需要的是圆形进度条，例如在10秒内从120度减少到0度。我已经能够使用插件来减少120度，但它总是从360度减少到240度。所以我想要一个从1/3的圆填充到0/3的圆填充的插件。

你在找这样的插件吗

https://github.com/johnschult/jquery.countdown360

你可以随意编辑它，它会从那一秒开始倒计时。

---

已经有一个演示了。

如何制作JQuery arcTimer/进度条

这也是我的第一个JQuery插件，所以如果有人看到错误，请指出它

制作jquery插件非常简单。您需要实现一些方法来实现这一目标。 第一个是声明插件的匿名函数

(function ($, window, document, undefined) {
    var pluginName = "arcTimer"; // requiered
    var defaults = {             // requiered
        // you defaults
        // todo see below for setting up defaults
    };

    // this is called to start your plugin.
    // element is the element that the plugin will run in
    // options ar the options passed to the plugin
    function Plugin(element, options) { // "this" is the plugin 
        this.element = element; 
        this.settings = $.extend({}, defaults, options); // gets the setting applying defaults as needed
        this._defaults = defaults; // save the defaults. Not sure if this is needed
        this._name = pluginName;  // save the name
        this._init();   // call your plugin startup code.
    }
    // now define the plugin prototype.
    Plugin.prototype = {
       // todo see below for setting plugin prototype
       _init:function(){ // internal functions and properties are generally prefixed with _
           // todo see below for init code
       }
    }
    // this defines you plugin in the jQuery scope.
    $.fn[pluginName] = function (options) {
        var plugin;
        this.each(function () {
            plugin = $.data(this, "plugin_" + pluginName);
            if (!plugin) {
                plugin = new Plugin(this, options);
                $.data(this, "plugin_" + pluginName, plugin);
            }
        });
        return plugin;
    };

})(jQuery, window, document);

这就是基本的插件结构。我称之为“arcTimer”，将按如下方式使用

HTML

  <div id="testPlug" style = "z-index:1000"></div>

让我们创建设置

defaults = { // angles in normalised Tua. 0 is 0deg, 1 is 360deg (2*PI)
    arcStart : 0, // start pos of arc
    arcEnd : 1,  // end pos of arc
    backgroundColour : "#bbb", // ouside color
    insideRadius : 60,   // inside radius
    outsideRadius : 80,   // outside radius
    centerRadius : undefined, // my bad should be in plugin prototype. But does not matter that its here for now
    outsideDistance : 4,  // pixel clearance of outside arc;
    outlineColour : "#000",  // line colour
    outlineWidth : 2,      // line width
    barColour : "red",  // bar colour
};

现在转到功能

一些必要的方法

// starts the timer at is optional. If not there start the thing at 0
start : function (at) {
    // vet at if there else start at 0
    this.position = at !== undefined ? Math.max(0, Math.min(1, at)) : 0;
    this._draw(); // draw it;
},
set : function (pos) {  // sets the pos between 0-1 then draws
    if (pos !== undefined) {
        this.position = Math.max(0, Math.min(1, pos));
        this._draw();
    }
},
complete : function () { // set the pos at 1;
    this.position = 1;
    this._draw();
},

要添加到原型中的一些内部变量

_TUA : Math.PI * 2, // two pie
_X : undefined,  // center of arc X
_Y : undefined,
position : 0,   // the bar position 0-1 is full sweep

// creates a canvas of the correct size to fit the setting we give
// inserts the canvas into the DOM and saves referances to the plugin prototype
_init : function () {
    this.settings.width = (this.settings.outsideRadius + this.settings.outsideDistance + this.settings.outlineWidth) * 2;
    this.settings.height = this.settings.width;
    this._X = this.settings.height / 2;
    this._Y = this.settings.height / 2;
    var $canvas = $("<canvas id=\"arcTimer_" + $(this.element).attr("id") + "\" width=\"" +
            this.settings.width + "\" height=\"" +
            this.settings.height + "\">" +
            "</canvas>");
    $(this.element).prepend($canvas[0]);
    this.can = $canvas[0];
    this.ctx = $canvas[0].getContext("2d");
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.lineJoin = "round";
    this.ctx.lineCap = "round";
    this.ctx.clearRect(0, 0, this.settings.width, this.settings.height);
},

让我们创建_inti原型

_TUA : Math.PI * 2, // two pie
_X : undefined,  // center of arc X
_Y : undefined,
position : 0,   // the bar position 0-1 is full sweep

// creates a canvas of the correct size to fit the setting we give
// inserts the canvas into the DOM and saves referances to the plugin prototype
_init : function () {
    this.settings.width = (this.settings.outsideRadius + this.settings.outsideDistance + this.settings.outlineWidth) * 2;
    this.settings.height = this.settings.width;
    this._X = this.settings.height / 2;
    this._Y = this.settings.height / 2;
    var $canvas = $("<canvas id=\"arcTimer_" + $(this.element).attr("id") + "\" width=\"" +
            this.settings.width + "\" height=\"" +
            this.settings.height + "\">" +
            "</canvas>");
    $(this.element).prepend($canvas[0]);
    this.can = $canvas[0];
    this.ctx = $canvas[0].getContext("2d");
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.lineJoin = "round";
    this.ctx.lineCap = "round";
    this.ctx.clearRect(0, 0, this.settings.width, this.settings.height);
},

最后是完成所有工作的钻头

    _draw : function () {
        var canvas = this.can;  // get the canvas and context
        var ctx = this.ctx;
        // clear the canvas
        ctx.clearRect(0, 0, this.settings.width, this.settings.height);
        // set up styles for outside arc
        ctx.fillStyle = this.settings.backgroundColour;
        ctx.strokeStyle = this.settings.outlineColour;
        ctx.lineWidth = this.settings.outlineWidth;
        // get the angular side of outside clearance
        var pix2Angle = this._mathDistToAngle(this.settings.outsideDistance, this.settings.centerRadius);
        pix2Angle /= this._TUA; // because draw circle use val normalised to tua (PI*2) need to set it to the correct range
        // draw the outside arc
        this._drawCircle(
            this._X,
            this._Y,
            this.settings.insideRadius - this.settings.outsideDistance,
            this.settings.outsideRadius + this.settings.outsideDistance,
            this.settings.arcStart - pix2Angle,
            this.settings.arcEnd + pix2Angle
        );
        // set the inside arc colour
        ctx.fillStyle = this.settings.barColour;
        // draw the inside arc 
        this._drawCircle(
            this._X,
            this._Y,
            this.settings.insideRadius,
            this.settings.outsideRadius,
            this.settings.arcStart,
            this._mathRange(this.position, this.settings.arcStart, this.settings.arcEnd)
        );
    }

就这么简单，真的。下面是正在使用的

（函数（$，窗口，文档，未定义）{
var pluginName=“arcTimer”，
默认值={//标准化Tua中的角度。0为0度，1为360度（2*PI）
arcStart:0//
阿肯德：1，
背景颜色：“bbb”，
内线半径：60，
阿迪乌斯：80，
中心半径：未定义，
外部距离：4，
大纲颜色：“000”，
大纲第1页第2页，
酒吧颜色：“红色”，
};
函数插件（元素、选项）{
this.element=元素；
this.settings=$.extend（{}，默认值，选项）；
this.settings.centeradius=（this.settings.insideRadius+this.settings.insideRadius）/2；
这是默认值；
这个。_name=pluginName；
这个；
}
Plugin.prototype={
_TUA:Math.PI*2，
_X:未定义，
_Y:未定义，
位置：0，
开始：功能（at）{
this.position=at！==未定义的数学最大值（0，数学最小值（1，at））：0；
这个；
},
设置：功能（pos）{
如果（位置！==未定义）{
this.position=Math.max（0，Math.min（1，pos））；
这个；
}
},
完成：函数（）{
这个位置=1；
这个；
},
_init：函数（）{
this.settings.width=（this.settings.outsideadius+this.settings.outsideDistance+this.settings.outlineWidth）*2；
this.settings.height=this.settings.width；
这。_X=this.settings.height/2；
这个。_Y=this.settings.height/2；
变量$canvas=$（“”+
"");
$（this.element）.prepend（$canvas[0]）；
this.can=$canvas[0]；
this.ctx=$canvas[0].getContext（“2d”）；
this.ctx.textAlign=“中心”；
this.ctx.textbrealine=“middle”；
this.ctx.lineJoin=“round”；
this.ctx.lineCap=“round”；
this.ctx.clearRect（0，0，this.settings.width，this.settings.height）；
},
_drawCircle：函数（x、y、r1、r2、from、to）{
ctx=this.ctx；
from=from*这个；
to=to*这个；
//日志（“s”）
ctx.beginPath（）；
ctx.弧（x，y，r1，to，from，true）；
ctx.arc（x，y，r2，from，to，false）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）；
},
_mathRange:函数（分数、开始、结束）{
返回（结束-开始）*分数+开始；
},
_MathDistAngle:函数（像素距离，半径）{
返回像素距离/半径；
},
_绘图：函数（）{
var canvas=this.can；
var ctx=this.ctx；
clearRect（0，0，this.settings.width，this.settings.height）；
ctx.fillStyle=this.settings.backgroundColor；
ctx.strokeStyle=this.settings.outlineColor；
ctx.lineWidth=this.settings.outlineWidth；
var pix2Angle=this.\u mathDistToAngle（this.settings.outsideDistance，this.settings.centerRadius）；
pix2Angle/=此。_TUA；//因为绘制圆使用归一化为TUA（PI*2）的val，所以需要将其设置为正确的范围
这是我的画圈(
这个，
这个，
this.settings.insideRadius-this.settings.outsideDistance，
this.settings.outsideRadius+this.settings.outsideDistance，
this.settings.arcStart-pix2Angle，
this.settings.arcEnd+pix2Angle）
ctx.fillStyle=this.settings.barcolor；
这是我的画圈(
这个，
这个，
这个.settings.insideRadius，
这是我的设置，
此.settings.arcStart，
this.\u mathRange（this.position、this.settings.arcStart、this.settings.arcEnd）
);
}
};
$.fn[pluginName]=函数（选项）{
var插件；
这个。每个（函数（）{
plugin=$.data（这是“plugin_u”+pluginName）；
如果（！插件）{
plugin=新插件（此，选项）；
$.data（这是“plugin_u”+pluginName，plugin）；
}
});
返回插件；
};
})（jQuery、窗口、文档）；
//在圆的1/3到2/3之间创建圆弧计时器
var arcT=$（“#testPlug”）.arcTimer({
arcStart:1/3，//
弧端：2/3，
美国银行