JS Canvas imitation Alipay Sesame Credit score instrument panel _javascript tips

This is a fake payment treasure sesame credit points of a canvas, in fact, is an animated dashboard.

First, the original artwork:

This is in the bottom of the capture of the treasure on the screenshot, you laughed at the low points. And then look at the effect I've implemented with canvas:

<canvas id= "Canvas" width= "height=" data-score= ' 724 ' ></canvas>
<!--set Data-score, fractional range [ 900]-->

Alas, it doesn't always feel like. This is a GIF, and it might be better to open it on a Web page (this may be the case, of course). You can click on the bottom to preview the demo on Codepen. There are two imperfect places, one is actually the scale on the credit dial of Sesame is uneven, I take the same scale for the simple realization, the second is the point of motion on the dial has vague effect, still not solved. Well, let's talk about it next time.

Then let's talk about how to achieve it. The first step, international practice, create canvas:

var canvas = document.getElementById (' canvas '),
 ctx = Canvas.getcontext (' 2d '),
 cwidth = Canvas.width,
 Cheight = Canvas.height;

Then draw the dial, although not Virgo, but also as far as possible with the original image of the same, that is the angle of the ring opening is how much? Please take a look at PS to test:

Well, 136°, this angle is really tricky, in order to facilitate the next calculation, it is about 140 °. So the radian of a fractional segment is:

var deg1 = Math.PI * 11/45
first, draw the middle translucent scale layer:

Ctx.save (); Intermediate scale layer
ctx.beginpath ();
Ctx.strokestyle = ' Rgba (255, 255, 255,. 2) ';
Ctx.linewidth = ten;
Ctx.arc (0, 0, 135, 0, one * deg0, false);
Ctx.stroke ();
Ctx.restore ();

Next, draw 6 tick marks, and use the For loop to achieve:

Ctx.save (); Tick mark for
(var i = 0; i < 6; i++) {
 ctx.beginpath ();
 Ctx.linewidth = 2;
 Ctx.strokestyle = ' Rgba (255, 255, 255,. 3) ';
 Ctx.moveto (140, 0);
 Ctx.lineto (130, 0);
 Ctx.stroke ();
 Ctx.rotate (DEG1);
}
Ctx.restore ();

Similarly, the large scale is subdivided into 5 small scales:

Ctx.save (); Subdivision tick mark for
(i = 0; i < i++) {
 if (i% 5!== 0) {
 ctx.beginpath ();
 Ctx.linewidth = 2;
 Ctx.strokestyle = ' Rgba (255, 255, 255,. 1) ';
 Ctx.moveto (140, 0);
 Ctx.lineto (0);
 Ctx.stroke ();
 }
 Ctx.rotate (DEG1/5);
}
Ctx.restore ();

The scale is OK here, but also need to mark the marks on the text and the credit level of each fractional segment, the specific see code, because with the scale to achieve the principle of almost, not long-winded. Now the key is to realize the point of the movement on the dial (do not know what to call it, the following is called the move point), we can think of it is a small radius of the circle, is only painted in the outermost circular orbit on the circle, and the circle on the canvas to achieve the method is:

Ctx.arc (x, y, radius, sangle, Eangle, false);
we just have to control X and Y to make it move and achieve the effect we want. So, create a moving point object:

function Dot () {
 this.x = 0;
 This.y = 0;
 This.draw = function (CTX) {
 ctx.save ();
 Ctx.beginpath ();
 Ctx.fillstyle = ' Rgba (255, 255, 255,. 7) ';
 Ctx.arc (This.x, This.y, 3, 0, Math.PI * 2, false);
 Ctx.fill ();
 Ctx.restore ();}
 ;
var dot = new dot (),
 dotspeed = 0.03,//control the speed of the
 angle = 0,//This is critical, to get the coordinates of the moving point x, y
 credit = 400;//credits minimum score

How do I get dot's coordinates x, y? That will use the legendary trigonometric functions.

We can get it by the figure above

x = R * cos (angle), y = R * sin (angle)
in JavaScript, the center coordinates of the dot become:

Dot.x = radius * Math.Cos (angle); Radius is the dot.y of the outermost orbital value
= radius * Math.sin (angle);

And then we just have to get this angle. This is achieved by the proportional relationship of radians to fractions:

var aim = (score-400) * DEG1/100;
if (angle < aim) {
 angle + = dotspeed;
}
Dot.draw (CTX);

Then let the middle of the credit score can also change with the rotation of the moving point, create a text (), in order to make the number change energy and moving point consistent, according to the speed of the moving point to calculate the number of changes:

function text (process) {
 ctx.save ();
 Ctx.rotate (DEG0);
 Ctx.fillstyle = ' #000 ';
 Ctx.font = ' 80px Microsoft yahei ';
 ctx.textalign = ' center ';
 Ctx.textbaseline = ' top ';
 Ctx.filltext (process, 0, ten);
 Ctx.restore ();
}
var textspeed = Math.Round (Dotspeed * 100/deg1),
if (Credit < Score-textspeed) {Credit
 + = Textspeed;
   } else if (>= score-textspeed && Credit < score) {
 credits + + 1;//Here's to make sure that the score is finally stopped is the fraction we entered 
   }
text (credit);

In the end, it all escaped. Let Window.requestanimationframe () control the drawing animation and use Ctx.clearrect (0, 0, Cwidth, cheight) to clear the canvas.

Writing is not good, everyone will look, I believe that we understand the ability of the code must be better than understand me these I do not know what to say words.

Well, above.

Code

<!  DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.