Resolving the fuzzy effect scheme of canvas drawing ring progress bar in HTML5

Problem

Recently used canvas to draw a ring progress bar, but the progress bar appears around the phenomenon of ambiguity, in response to this phenomenon, online search, someone asked, but seemingly no good solution, in view of this situation, put forward several solutions, for reference only! The blur effect is as follows:

Solution

In view of this kind of situation, I propose several solution ideas.

First, the use of Hidpi-canvas-polyfill JS to solve

HIDPI Canvas Polyfill is a Canvas HD solution for the device, first introduced hidpi-canvas.js.

This JS will automatically identify your canvas, will make your canvas smaller, although not blurred, but not the effect we want. (Can be improved with the following methods)

The concrete use method everybody can see his description. There is no explanation here.

Disadvantage: This way although can be solved, but feel to introduce some JS after all, for automatic identification, canvas may become smaller, and, he will automatically add a canvas, these under certain circumstances is not what we want.

Second, specify the default width-high method

This way, to a certain extent, can solve the vague problem I said. Refine the above code as follows.

<canvas id= "Pczren" data-process= "width=", "height=", "></canvas>"
Canvas specifies a wide height, and the radius is only less than 250/2. The center point coordinates are directly the canvas of the height divided by 2.

The code is as follows:

var pczren = document.getElementById (' Pczren ');
var mprocess = pczren.getattribute (' data-process ');
var mctx = Pczren.getcontext (' 2d ');
var Wc = pczren.width;
var Hc = pczren.height;

function Draw (CTX, process, colors, FCO) {
Draw a gray circle
Ctx.beginpath ();
Ctx.arc (WC/2, hc/2,100, 0, Math.PI * 2);
Ctx.closepath ();
Ctx.fillstyle = FCO;
Ctx.fill ();
Draw a progress ring
Ctx.beginpath ();
Ctx.moveto (WC/2, HC/2);
Ctx.arc (WC/2, HC/2, Math.PI * 2.5, Math.PI * (2.5 + 2 * process/100));
Ctx.closepath ();
Ctx.fillstyle = colors;
Ctx.fill ();
Fill circle inside a picture
Ctx.beginpath ();
Ctx.arc (WC/2, HC/2, 0, Math.PI * 2);
Ctx.closepath ();
Ctx.fillstyle = ' #fff ';
Ctx.fill ();
}
Draw (Mctx, mprocess, ' #53b48d ', ' #edecec ');

The effect chart is as follows:

Third, canvas substitution method

Of course, this method is not what we want, in the absence of solutions, we can choose alternative solutions to solve this problem, we can imagine, in addition to using canvas to draw the ring progress bar, we have no other way? For example, Css3+jquery scheme, CSS3 scheme and so on.

3.1css3+jquery programme
HTML is as follows:

<div class= "Circle" style= "left:220px" >
<div class= "Pie_left" ><div class= "left" ></div></div>
<div class= "Pie_right" ><div class= "right" ></div></div>
<div class= "Mask" ><span>15</span>%</div>
</div>

CSS is as follows:

Body {
font-family: "Microsoft Ya Hei";
}
. Circle {
width:200px;
height:200px;
Position:absolute;
border-radius:50%;
Background: #0cc;
}
. Pie_left,. pie_right {
width:200px;
height:200px;
Position:absolute;
top:0;left:0;
}
. Left,. Right {
width:200px;
height:200px;
Background: #00aacc;
border-radius:50%;
Position:absolute;
top:0;
left:0;
}
. Pie_right,. Right {
Clip:rect (0,auto,auto,100px);
}
. Pie_left,. Left {
Clip:rect (0,100px,auto,0);
}
. Mask {
width:150px;
height:150px;
border-radius:50%;
left:25px;
top:25px;
Background: #FFF;
Position:absolute;
Text-align:center;
line-height:150px;
font-size:20px;
Font-weight:bold;
Color: #00aacc;
}

jquery is as follows:

$ (function () {
$ ('. Circle '). each (function (index, EL) {
var num = $ (this). Find (' span '). Text () * 3.6;
if (num<=180) {
$ (this). Find ('. Right '). CSS (' transform ', "rotate (" + num + "deg)");
} else {
$ (this). Find ('. Right '). CSS (' transform ', "Rotate (180deg)");
$ (this). Find ('. Left '). CSS (' transform ', "rotate (" + (num-180) + "deg)");
};
});

});

The above code can implement the ring progress bar!

3.2 CSS Scheme

Method One: Use picture way, n picture, keep background-position position change, simulate 1% to 100% of situation!

Method Two:

The ring CSS is written as follows:

. circleprogress{
width:160px;
height:160px;
border:20px solid red;
border-radius:50%;
}
The incomplete circle is written as follows:

. circleprogress{
width:160px;
height:160px;
border:20px solid red;
border-left:20px solid Transparent;
border-bottom:20px solid Transparent;
border-radius:50%;
}

But what about a multiple of the 45-degree angle? The following code can use CSS animation to achieve progress bar effect!

. circleprogress_wrapper{
width:200px;
height:200px;
margin:50px Auto;
position:relative;
border:1px solid #ddd;
}
. wrapper{
width:100px;
height:200px;
Position:absolute;
top:0;
Overflow:hidden;
}
. right{
right:0;
}
. left{
left:0;
}
. circleprogress{
width:160px;
height:160px;
border:20px Solid RGB (232, 232, 12);
border-radius:50%;
Position:absolute;
top:0;
-webkit-transform:rotate (45DEG);
}
. rightcircle{
border-top:20px solid Green;
border-right:20px solid Green;
right:0;
-webkit-animation:circleprogressload_right 5s linear Infinite;
}
. leftcircle{
border-bottom:20px solid Green;
border-left:20px solid Green;
left:0;
-webkit-animation:circleprogressload_left 5s linear Infinite;
}
@-webkit-keyframes circleprogressload_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform:rotate (45DEG);
}
50%{
border-top:20px Solid RGB (232, 232, 12);
border-right:20px Solid RGB (232, 232, 12);
border-left:20px solid RGB (81, 197, 81);
border-bottom:20px solid RGB (81, 197, 81);
-webkit-transform:rotate (225DEG);
}
100%{
border-left:20px solid Green;
border-bottom:20px solid Green;
-webkit-transform:rotate (225DEG);
}
}
@-webkit-keyframes circleprogressload_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform:rotate (45DEG);
}
50%{
border-bottom:20px Solid RGB (232, 232, 12);
border-left:20px Solid RGB (232, 232, 12);
border-top:20px solid RGB (81, 197, 81);
border-right:20px solid RGB (81, 197, 81);
-webkit-transform:rotate (45DEG);
}
100%{
border-top:20px solid Green;
border-right:20px solid Green;
border-bottom:20px solid Green;
border-left:20px solid Green;
-webkit-transform:rotate (225DEG);
}
}

Summary

This paper puts forward several solutions to solve the ambiguity effect of canvas drawing rings.

Original from: Http://www.haorooms.com/post/canvas_jdtmuhu