The use of JavaScript learning summary canvas painting "Duo A Dream" clock _javascript skills

Preface: Today read the canvas canvas of JS book, Good Happy ~ is the beloved canvas~ oh yes ~

Before I saw someone suggested that I paint blue fat, oh, how do I put the favorite childhood blue fat forget, in order to express my apology to the blue fat, so today I drew a move Hello World, is a kind of progress slightly ~

All right, everyone, please go inside, please do not block the passage, thank you. Let's drive.

Body:

Let's take a look at the results today.

Today's blue fat long so, see it is still so fat, I feel relieved. The world is full of positive energy, and there are still people fatter than me, hahaha

And then the code.

HTML section

<canvas id= "MyCanvas" width= "height=" > quickly to upgrade the browser bar ~</canvas>

JS part

Window.addeventlistener ("Load", function () {//Get canvas context var contextual = document.getElementById ("MyCanvas"). GetContext ("
2d ");

To determine if the context exists, there is a way to execute the next code if (contexts) {//Start a new subpath context.beginpath ();
We are going to draw two concentric circles as the border of the clock//Draw an outer circle Context.arc (100,100,99,0,2*math.pi,false);
With a nice blue fill context.fillstyle = "#315f9b";
Context.fill ();
Draw a circle of the sideline Context.stroke ();
Start a new subpath,//here is necessary, otherwise the color of the fill will cover all the Context.beginpath ();
The starting point is moved to (194,100), and the point Context.moveto (194,100) is computed with the radius and the center of the circle; Draw the inner circle (round God?)
) Context.arc (100,100,94,0,2*math.pi,false);
Fill the inner circle with another nice little light blue Context.fillstyle = "#4ba2cf";
Context.fill ();
Context.stroke ();
Blue fat appeared ~//Create an Image object, set its src to blue fat image var image = new Image ();
IMAGE.SRC = "2.png";
In the context of the method drawImage the picture from the point (25,25) to draw, painted in the side of the rectangle length 150 context.drawimage (image,25,25,150,150);
The Moving transformation matrix//Move after (100,100) as the new origin, i.e. (0,0) context.translate (100,100);
Paint our point of time with a similarly nice blue Context.fillstyle = "#02285a"; Filltext The first argument is the string to draw, the second parameter is X, and the third Y//below x,y value is the effect after debugging, everyone according to different circumstances, then make adjustments oh Context.filltext ("12",-5,-80);
Context.filltext ("6", -4,87);
Context.filltext ("3", 80, 1);
Context.filltext ("9", -86,1);
Details This function nowtime (context) later; }},false);

The dials of the above clocks appear, but the clock is the most important thing is that it can show the time ah (nonsense), so the next is to draw the pointer

Nowtime function Section

function Nowtime (context) {//Create a Date object that is used to get local time var mydate = new Date ();//Get hours, minutes, seconds var myhour = mydate.gethours ();
The hour is converted to 12 o'clock if (Myhour >=) {myhour = myHour-12;} var mymin = Mydate.getminutes ();
var mysec = Mydate.getseconds ();
Describe the hour//the radian var Hourarc used to store the current hour on the dial; At 3 as the starting point of the circumference, clockwise to indicate radians if (Myhour < 3) {Hourarc = 2*math.pi-(3-myhour) *MATH.PI/6;}
else{Hourarc = (myHour-3) *MATH.PI/6}//When pointing to 3,6,9,12, the multiples of 90°//Here are biased by the angle conversion to radians, so specifically handle the switch (myhour) {case 0:
Hourarc = Math.pi*3/2;break;
Case 3:HOURARC = 0;break;
Case 6:HOURARC = Math.pi/2;break;
Case 9:HOURARC = Math.pi;break;
//Call the Drawtime function and draw an hour needle drawtime (context,hourarc,60) on the dial; 
The minute//is used to store the current minute on the dial in radians var Minarc; With 15 points as the starting point of the circumference, clockwise to indicate radians if (Mymin <) {Minarc = 2*math.pi-(15-mymin) *math.pi/30;} else{Minarc = (myMin-15) *math.pi/30;}//Processing minute, still here because the angle is converted to radians there is a deviation, so special deal with the switch (mymin) {Case 0:MINARC = Math.pi*3/2;brea
K
Case 15:MINARC = 0;break;
Case 30:MINARC = Math.pi/2;break;
Case 45:MINARC = Math.pi;break;
}Call the Drawtime function and draw the minute needle drawtime (context,minarc,80) on the dial;
Describe the second//to store the current second on the Dial radian var Secarc; 15 seconds as the starting point of the circumference, clockwise to indicate radians if (Mysec <) {Secarc = 2*math.pi-(15-mysec) *math.pi/30;} else{Secarc = (mySec-15) *math.pi/30;}//processing seconds, still still here because the angle is converted to radians there is a deviation, so special deal with the switch (mysec) {Case 0:SECARC = Math.pi*3/2;bre
Ak
Case 14:SECARC = 0;break;
Case 29:SECARC = Math.pi/2;break;
Case 44:SECARC = Math.pi;break;
//Call the Drawtime function to draw an hour needle drawtime (context,secarc,80, "Red") on the dial;
Set a timeout call function, each second timeout call nowtime update clock settimeout (function () {//call to draw a new pointer before, of course, should be clear down the original clock, with the Cleartime function, really good!
Cleartime (context);
Clear the unauthorized pointer, then draw the current pointer ~ nowtime (context);
},1000); }

So, how do we specifically manipulate the context to draw pointers? I don't know, so let's get this over with today.

Joking, hey, take it easy (be sure to pretend to be my whole ha)

Next is the Drawtime function, which has a total of four parameters (context,thearc,thelength,color= "#000"), the context at the glance of the canvas, THEARC is the angle we want to rotate the canvas, The thelength represents the length of the pointer, and the color is the colour of the pointer.

function Drawtime (context,thearc,thelength,color= "#000") {
//Save the current canvas environment, working with the Restore method to restore the canvas context
Context.save ();
Rotate the canvas, rotate the incoming parameters to represent the rotated Radian
context.rotate (THEARC);
Start a new sub path, we start to draw the pointer
Context.beginpath ();
Move the start point to (0,0)
Context.moveto (0,0);
Draw a path to (thelength,0)
Context.lineto (thelength,0);
Draws the path with the specified color color
context.strokestyle = color;
The path width is 2
context.linewidth = 2;
The path is not visible, if you want to see the path, you need to use stroke to stroke, and how to trace this line, we can use the above several attributes to define
context.stroke ();
Restore Context
context.restore ();
}

Although it is nearing the end, but there is a very important cleartime function, without it, your clock will be occupied by the dense second hand, caring for people with a phobia, we are all responsible for

function Cleartime (context) {
//We start a new subpath and then depict a circle full of good-looking blue, covering the hands we painted before, which is equivalent to clearing the Dial
Context.beginpath () ;
Context.arc (0,0,80,0,2*math.pi,false);
Context.fillstyle = "#4ba2cf";
Context.fill ();
Unfortunately, our blue fat was also accidentally injured, so call it again, the decision is you, Pikachu (?)
var image = new Image ();
IMAGE.SRC = "2.png";
The coordinates are different from the first load, because we have modified the transformation matrix, remember? Therefore, their coordinates should be complementary
context.drawimage (image,-75,-75,150,150);

Well, OK, now is really the end of it, it is almost time to eat slightly ~ everyone lovely program apes to remember to eat oh ~