Preface: I finished reading the canvas canvas of JS book today. I am so happy~ I am my beloved canvas again~ Ouye~
I saw someone suggesting me to draw a blue fat man before, yes, why did I forget the favorite blue fat man I had in my childhood? In order to express my apology to the blue fat man, I drew a moving hello world today, which is also a kind of improvement~
Okay, please go inwards for passengers. Please do not block the passage, thank you. Let's drive ~
text:
Let's take a picture today and see the effect
Today, the fat blue man looks like this, and I feel relieved to see that he is still so fat. This world is still full of positive energy, and there are still people who are fatter than me, hahahaha
Then the code
html part
<canvas id="myCanvas">Go and upgrade your browser~</canvas>
Js part
window.addEventListener("load", function(){//Get the canvas context var context = document.getElementById("myCanvas").getContext("2d");//Judge whether the context exists, if it exists, you can execute the next code if(context){//Start a new subpath context.beginPath();//We are going to draw two concentric circles as borders of the clock//Draw a large circle outside context.arc(100,100,99,0,2*Math.PI,false);//Fill context.fillStyle = "#315f9b";context.fill();//Draw the edge of the large circle context.stroke();//Start a new subpath, //This is necessary, otherwise the fill color will cover all the previous ones in context.beginPath();//Move the starting point to (194,100), and calculate the point context.moveTo(194,100);//Draw the small circle inside (round god?) context.arc(100,100,94,0,2*Math.PI,false);//Fill the small circle inside with another nice-looking light blue color context.fillStyle = "#4ba2cf";context.fill();context.stroke();//The blue fat man appears~//Create an Image object and set its src to the blue fat man's image var image = new Image();image.src = "2.png";//Use the context method drawImage to draw the image from the point (25,25), and draw it in a rectangle with a side length of 150 context.drawImage(image,25,25,150,150);//Move the transformation matrix//After moving (100,100) as the new origin, that is (0,0)context.translate(100,100);//Draw our time point context.fillStyle = "#02285a";//The first parameter is the string to be drawn, the second parameter is x, and the third is y//The following x, the y value is the effect after debugging. Please adjust it according to different situations.fillText("12",-5,-80);context.fillText("6",-4,87);context.fillText("3",80,1);context.fillText("9",-86,1);//See more details about this function nowTime(context);}},false);The dials of the above clocks appear, but the most important reason why the clock is a clock is that it can display time (nonsense), so the next step is to draw the pointer.
nowTime function part
function nowTime(context){//Create a date object to get the local time var myDate = new Date();//Get hours, minutes, seconds var myHour = myDate.getHours();//Convert hour to 12-hour format if(myHour >= 12){myHour = myHour-12;}var myMin = myDate.getMinutes();var mySec = myDate.getSeconds();//Describe the hour//Use to store the radians of the current hour on the dial var hourArc;//Use 3 hours as the starting point of the circumference, representing the radians clockwise 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, it is exactly a multiple of 90°//There is a deviation from the angle converted to radians, so special treatment is given to 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 drawTime function and drawTime(context,hourArc,60);//Draw minutes//Use the radian var minArc on the dial of the current minute on the dial; //Use 15 minutes as the starting point of the circumference to represent the radian clockwise if(myMin < 15){minArc = 2*Math.PI-(15-myMin)*Math.PI/30;}else{minArc = (myMin-15)*Math.PI/30;}//Processing minutes, it is still here because the angle is converted to radians, so switch(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 drawTime function and drawTime(context,minArc,80);//Draw seconds//Use the current second to store the radian var secArc on the dial;//Use 15 seconds as the starting point of the circumference, and represent the radian clockwise if(mySec < 15){secArc = 2*Math.PI-(15-mySec)*Math.PI/30;}else{secArc = (mySec-15)*Math.PI/30;}//Processing for seconds, it is still here because the angle is converted to radians and there is a deviation, so special processing is switch(mySec){case 0:secArc = Math.PI*3/2;break;case 14:secArc = 0;break;case 29:secArc = Math.PI/2;break;case 44:secArc = Math.PI;break;}//Call drawTime function and drawTime(context,secArc,80,"red");//Set a timeout call function, call nowTime for every second timeout call nowTime to update the 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 pointer and draw the current pointer again~nowTime(context);},1000);}So, how do we specifically draw pointers when we operate the context? I don't know either, so let's end it today~
Just kidding, hehe, take it easy (must pretend I'm going to mess with you)
Next is the drawTime function, which has four parameters in total (context, theArc, theLength, color="#000"). The context sees through the context that is the canvas at first glance, theArc is the angle where we want to rotate the canvas, theLength represents the length of the pointer, and color is the color of the pointer.
function drawTime(context,theArc,theLength,color="#000"){//Save the current canvas environment and use it in conjunction with the restore method to restore the canvas context.save();//Rotate the canvas, the parameters passed in rotate represent the rotation radian context.rotate(theArc);//Start a new subpath, we start drawing pointer context.beginPath();//Move the start point to (0,0)context.moveTo(0,0);//Draw a path to (theLength,0);//Draw this path with the specified color color context.strokeStyle = color;//The width of the path is 2context.lineWidth = 2;//The path is invisible. If you want to see the path, you need to use stroke to trace the line. How to trace this line can be defined by the several attributes we used above;//Restore context context.restore();}Although it is coming to an end, there is also a very important clearTime function. Without it, your clock will be occupied by dense seconds. We all have the responsibility to care for patients with intensive phobia.
function clearTime(context){//We start a new subpath, and then draw a circle full of beautiful blue, covering the pointers we drew 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 man was also injured by accident, so summon it again, and it will be you, Pikachu (?Huh) var image = new Image();image.src = "2.png";//This coordinate is different from the coordinates 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 really over here now, it's almost time to go to have a meal~ Dear cute programmers, remember to eat~