JavaScript learning Summary: Use canvas to draw the "Doraemon" clock and javascriptcanvas

JavaScript learning Summary: Use canvas to draw the "Doraemon" clock and javascriptcanvas

I am so happy to have read the canvas of the Js book today ~ It's also a beloved canvas ~ Ouye ~

I was advised to draw a blue fat man before. Yes, how can I forget my childhood favorite blue fat man? To express my apologies for the blue fat man, so today I drew the dynamic hello world, which is also an improvement ~

All right, please let the passengers on the bus go in. Please do not block the channel. Thank you. Let's drive ~

Body:

Let's take a look at the results.

I am relieved to see that the blue fat man is so fat today. The world is still full of positive energy, and people are always fatter than me, hahaha

Then the code

Html section

<Canvas id = "myCanvas" width = "500" height = "500"> Upgrade your browser ~ </Canvas>

Js Section

Window. addEventListener ("load", function () {// obtain the canvas context var context = document. getElementById ("myCanvas "). getContext ("2d"); // determines whether the context exists. if it exists, run the following code if (context) {// start a new sub-path context. beginPath (); // we are going to draw two concentric circles as the frame of the clock. // draw an outer large circle context. arc (100,100, 2 * Math. PI, false); // fill the context with a nice blue. fillStyle = "# 315f9b"; context. fill (); // draw the context of the large circle. stroke (); // starts a new sub-path. // This is required. Otherwise, all the previous sub-paths will overwrite the context. beginPath (); // Move the start point to (194,100) and use the context. moveTo (194,100) calculated from the radius and the center of the circle. // draw the inner circle (circle God ?) Context. arc (100,100, 2 * Math. PI, false); // use another nice light blue to fill the inner circle context. fillStyle = "# 4ba2cf"; context. fill (); context. stroke (); // blue fat man appears ~ // Create an Image object and set its src to var image = new Image (); image. src = "2.png"; // use the context method drawImage to draw an image from a vertex (150) and draw the context in a rectangle with a side length. drawImage (image, 150,150, 100,100); // move the transform matrix // After moving () as the new origin, that is, () context. translate (100,100); // use the same nice blue to draw the context of our time point. fillStyle = "# 02285a"; // The first parameter of fillText is the string to be drawn, the second parameter is x, and the third parameter is y, the value y is the effect after debugging. You can adjust the context according to different situations. fillText ("12",-5,-80); context. fillText ("6",-4,87); context. fillText ("3", 80, 1); context. fillText ("9",-); // later detail this function nowTime (context) ;}, false );

The dial of the above clock appears, but the most important thing for the clock is that it can display time (nonsense), so the next step is to draw a pointer.

NowTime Function

Function nowTime (context) {// create a Date object to obtain the local time var myDate = new Date (); // obtain the hour, minute, and second var myHour = myDate. getHours (); // converts hour to 12 hour if (myHour> = 12) {myHour = myHour-12;} var myMin = myDate. getMinutes (); var mySec = myDate. getSeconds (); // depicts the hour // used to store the radian var hourArc of the current hour on the dial; // starts with 3 hours as the circumference, clockwise indicates the radian if (myHour <3) {hourArc = 2 * Math. PI-(3-myHour) * Math. PI/6;} else {hourArc = (myHour-3) * Math. PI/6;} // when it points to 3, 6, 9, 12, it is exactly a multiple of 90 ° // Here, the angle conversion to radians is biased, so 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 to draw the hourly drawTime (context, hourArc, 60) on the dial ); // depicts the minute // used to store the arc var minArc of the current minute on the dial; // uses 15 minutes as the start point of the circumference, and clockwise indicates the radian if (myMin <15) {minArc = 2 * Math. PI-(15-myMin) * Math. PI/30;} else {minArc = (myMin-15) * Math. PI/30;} // processing minutes. This is still because the angle is converted to radians with deviations. Tch (myMin) {case 0: minArc = Math. PI * 3/2; break; 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-level needle drawTime (context, minArc, 80) on the dial ); // depicts the second // used to store the radian var secArc of the current second on the dial; // uses 15 seconds as the starting point of the circumference and clockwise indicates the radian if (mySec <15) {secArc = 2 * Math. PI-(15-mySec) * Math. PI/30;} else {secArc = (mySec-15) * Math. PI/30;} // processing second, still here because there is a deviation from the angle to the radian, So switch (mySec) {case 0: secArc = M Ath. PI * 3/2; break; case 14: secArc = 0; break; case 29: secArc = Math. PI/2; break; case 44: secArc = Math. PI; break;} // call the drawTime function and draw the hourly drawTime (context, secArc, 80, "red") on the dial. // set a time-out call function, every second of timeout call nowTime update clock setTimeout (function () {// before calling to draw a new pointer, of course you should clear the original hour hand. Use the clearTime function, it is really easy to use! ClearTime (context); // clear the idle sub-pointer and draw the current pointer again ~ NowTime (context) ;}, 1000 );}

So, how do we draw a pointer in the context? I don't know. So, let's end today ~

Are you kidding? Hey, take it easy (Make sure you pretend to be me here)

Next is the drawTime function, which has four parameters (context, theArc, theLength, color = "#000"). context is the context of the canvas at a glance, theArc is the angle of the canvas to be rotated. theLength indicates the length of the pointer, and color indicates the color of the pointer.

Function drawTime (context, theArc, theLength, color = "#000") {// Save the current canvas environment and use it with the restore method to restore the canvas context. save (); // rotate the canvas. The parameters passed in by rotate represent the rotating radian context. rotate (theArc); // starts a new sub-path. Let's start to draw the context pointer. beginPath (); // move the start point to (0, 0) context. moveTo (0, 0); // draw a path to (theLength, 0) context. lineTo (theLength, 0); // draw the context path in the specified color. strokeStyle = color; // The path width is 2context. lineWidth = 2; // The path is invisible. If you want to see the path, you need to use stroke to describe the line, the context can be defined by the attributes used above. stroke (); // restore context. restore ();}

Although it is coming to an end, there is also a very important clearTime function. Without it, your clock will be occupied in seconds. We are responsible for caring for patients with intensive phobias.

Function clearTime (context) {// we start a new sub-path, and then depict a circle filled with beautiful blue, covering all the pointers we drew earlier, the dial context is cleared once. beginPath (); context. arc (, 80, 0, 2 * Math. PI, false); context. fillStyle = "# 4ba2cf"; context. fill (); // unfortunately, our blue fat man is also hurt by mistake, so call it again and decide it's you, picaccho (? Callback) var image = new Image (); image. src = "2.png"; // The coordinate is different from the coordinate loaded for the first time because we modified the transformation matrix. Do you still remember? Therefore, their coordinates should be complementary context. drawImage (image,-75,-75,150,150 );}

Well, OK. It's so far now. It's almost time to eat ~ Dear programmers, remember to eat ~