/**
* Circular progress bar
* Description: 1. percentage can be displayed in the ring progress bar.
* 2. Supports ring gradient.
*/
Function drawprocess ()
{
VaR canvas = $ ("canvas") [0];
VaR context = canvas. getcontext ('2d ');
Context. clearrect (0, 0,100,100 );
Context. fillstyle = "Transparent"
Canvas. width = 100;
Canvas. Height = 100;
// Draw a gray circle
VaR drawgraycircle = function (){
Context. beginpath ();
Context. ARC (50, 50, 50, 0, math. Pi * 2, false );
Context. closepath ();
Context. fillstyle = '# DDD ';
Context. Fill ();
};
VaR process = 0; // progress
VaR Linear = context. createlineargradient (0, 0,100,100 );
VaR drawred = function (){
Context. Save ();
// Draw a red circle
Context. beginpath ();
VaR startdeg =-math. PI/2 + math. Pi * 2 * process/100;
VaR enddeg =-math. PI/2 + math. Pi * 2 * (++ process)/100;
Context. moveTo (50, 50 );
Context. ARC (50, 50, 50, startdeg, enddeg, false );
// Context. Translate (50, 50 );
// Context. Rotate (-math. PI/2 );
Context. fillstyle = context. strokestyle = getcurcolor (process );
Context. closepath ();
Context. Fill ();
Context. Stroke ();
Context. Restore ();
Drawemptycircle ();
Drawtext ();
Progress = setTimeout (drawred, 1000/60 );
If (process = 100)
{
Cleartimeout (Progress );
Progress = NULL;
Console. Log (canvas. todataurl ("image/JPEG "))
}
If (process = 60)
{
Console. Log (canvas. todataurl ("image/PNG "));
Console. Log (context. linewidth );
}
};
VaR progress = setTimeout (drawred, 1000/60 );
/**
* Draw an empty circle
*/
VaR drawemptycircle = function (){
Context. beginpath ();
Context. ARC (50, 50, 45, 0, math. Pi * 2, true );
Context. closepath ();
Context. fillstyle = 'rgba (255,255,255, 1 )';
Context. Fill ();
};
// Write
VaR drawtext = function (){
Context. Save ();
Context. font = "bold 14px Arial ";
Context. fillstyle = 'green ';
Context. textalign = 'center ';
Context. textbaseline = 'middle ';
// Context. Translate (50, 50 );
// Context. Rotate (-math. PI/2 );
Context. filltext (process + "%", 50, 50 );
Context. Restore ();
};
/**
* Draw a contour
*/
VaR drawoutline = function (){
// Save the context status
Context. Save ();
Context. beginpath ();
Context. ARC (50, 50, 46, 0, math. Pi * 2, true );
Context. closepath ();
Context. linewidth = 1;
Context. strokestyle = 'yellow ';
Context. Stroke ();
// Restore Context
Context. Restore ();
};
VaR startcolor = 'rgb (249, 72, 80 )';
VaR endcolor = 'rgb (255,255,255 )';
VaR rstep = (255-249)/100;
VaR gstep = (255-72)/100;
VaR bstep = (255-80)/100;
VaR getcurcolor = function (DEG ){
VaR normaldeg = deg * 180/Math. Pi;
VaR argb = [];
Argb. Push (249 + rstep * process). tofixed (0 ));
Argb. Push (72 + gstep * process). tofixed (0 ));
Argb. Push (80 + bstep * process). tofixed (0 ));
Return 'rgb ('+ argb. Join (', ') + ')';
};
Drawoutline ();
SetTimeout (function (){
$ ('<IFRAME id = "frame"> </iframe>'). appendto ("body ")
Canvas. onclick = function (){
// Var o = Window. Open (canvas. todataurl (), "", "width = 1, Height = 1, Top = 5000, Left = 5000 ");
/// Location. href = canvas. todataurl ();
// O.document.exe ccommand ("saveas ")
// O. Close ()
Document. All ("frame"). Location = canvas. todataurl ()
Document.exe ccommand ("saveas ");
}
})
}
Drawprocess ();
/**
* Pie chart 1
* Description: 1. animation effects are supported.
* 2. Percentage of slices can be displayed.
* 3. Support for animation
* 4. easy configuration of the number and color of slices
*/
Function drawcircle ()
{
VaR Pi = 3.14;
// Var Pi = math. Pi;
VaR colors = ["# 4f81bd", "# c0504d", "#9bbb59", "Red", "# 3c3c3c", "green"];
VaR DATA = [30, 20, 10, 20, 10, 10];
VaR canvas = Document. getelementsbytagname ("canvas") [0];
VaR CTX = canvas. getcontext ("2D ");
VaR startdeg = 0;
VaR requestframe = {};
VaR per = pI * 2/100;
For (VAR I = 0, length = data. length; I <length; I ++)
{
Requestframe ['percent' + I] = data [I] + "% ";
}
VaR dodraw = function (startdeg, enddeg, color, index ){
If (startdeg <enddeg)
{
CTX. Save ();
VaR curdeg = startdeg + per;
CTX. beginpath ();
CTX. moveTo (50, 50 );
CTX. ARC (50, 50, 50, startdeg, curdeg, false );
CTX. fillstyle = color;
CTX. strokestyle = color;
CTX. closepath ();
CTX. Fill ();
CTX. Stroke ();
CTX. Restore ();
Requestframe [I] = requestanimationframe (dodraw. BIND (this, curdeg, enddeg, color, index ));
}
Else
{
Cancelanimationframe (requestframe [Index]);
// CTX. clearrect (0, 0,100,100 );
CTX. Save ();
CTX. fillstyle = "red ";
CTX. beginpath ();
CTX. Translate (50, 50 );
CTX. ARC (0, 0, 5, 0, pI * 2, false );
CTX. closepath ();
CTX. Fill ();
Console. Log ("% C" + requestframe ['startdeg '+ Index] + "~~~~~~~~ "+ Requestframe ['enddeg '+ Index]," font-size: 14px; color: Purple ;")
VaR rotatedeg = (requestframe ['enddeg '+ Index]-requestframe ['startdeg' + Index])/2 + requestframe ['startdeg '+ Index];
CTX. beginpath ();
CTX. textalign = "center ";
CTX. textbaseline = "Middle ";
CTX. font = "14px ";
CTX. fillstyle = "# ffffff ";
If (rotatedeg <= 3/2 * PI & rotatedeg> 1/2 * PI)
{
Rotatedeg + = PI;
CTX. Rotate (rotatedeg );
CTX. Translate (-50, 0 );
}
Else
{
CTX. Rotate (rotatedeg );
}
CTX. filltext (requestframe ['percent' + Index], 25, 0 );
CTX. closepath ();
CTX. Restore ();
}
};
Canvas. width = 100;
Canvas. Height = 100;
For (VAR I = 0; I <data. length; I ++)
{
VaR enddeg = startdeg + per * Data [I];
Requestframe ['startdeg '+ I] = startdeg;
Requestframe ['enddeg '+ I] = enddeg;
Requestframe [I] = requestanimationframe (dodraw. BIND (this, startdeg, enddeg, colors [I], I ));
Console. Log (startdeg + "~~~~ "+ Enddeg)
Startdeg = enddeg;
}
}
Drawcircle ();
/**
* No special effect for pie chart 2
*/
VaR color = ["# 27255f", "# 2f0000f", "#3666b0"];
VaR DATA = [50, 20, 30];
Function drawcircle (){
VaR canvas = Document. getelementsbytagname ("canvas") [0];
VaR CTX = canvas. getcontext ("2D ");
VaR startpoint = 0;
Canvas. width = 155
For (VAR I = 0; I <data. length; I ++ ){
CTX. fillstyle = color [I];
CTX. beginpath ();
CTX. moveTo (100,100 );
CTX. strokestyle = color [I];
VaR enddeg = startpoint + math. Pi * 2 * (data [I]/100)
CTX. ARC (100,100, 50, startpoint, enddeg, false );
Console. Log (startpoint + "~~~~ "+ Enddeg)
CTX. Fill ();
CTX. Stroke ()
Startpoint + = math. Pi * 2 * (data [I]/100 );
}
}
Drawcircle ();
Circle of canvas notes
