Canvas clock animation, canvas clock
When the company is not busy at ordinary times, I like to write some small effects or something, so I can review and find some problems.
Today, I saw a picture of someone else's watch in the group... after years of working properly, I thought about doing my own thing well. I drew a watch when I thought about how to do it ....
Directly run the Code:
Html
<!DOCTYPE HTML>Js
Var clock = (function () {function _ canvasClock () {var cvs = document. getElementById ('canvas '); var ctx = cvs. getContext ('2d '); var PI = Math. PI; var lineWidth = 5; // var gradient = ctx. createLinearGradient (10, 10, 580,580); // set the color gradient of the circle. addColorStop ("0", "# a251ff"); gradient. addColorStop (1, "# 2ec2ff"); ctx. fillStyle = '# ef6670'; ctx. fillRect (0, 0, 600,600); var drawBig = function () {var time = new Date (); var Second = time. getSeconds (); // second var Minute = time. getMinutes (); // minute var hour = time. getHours (); // hour = hour + Minute/60; hour = hour> 12? Hour-12: hour; // The dial has only 12 hours of ctx. clearRect (600,600,); // clear the specified pixel in the given rectangle // draw the circle ctx. beginPath (); ctx. lineWidth = lineWidth; ctx. strokeStyle = gradient; ctx. arc (300,300,290, 0, PI * 2, false); ctx. stroke (); ctx. closePath (); ctx. beginPath (); ctx. lineWidth = lineWidth; ctx. strokeStyle = gradient; ctx. arc (300,300, PI * 2, false); ctx. stroke (); ctx. closePath (); for (var I = 0; I <60; I ++) {ctx. save (); // save the previous canvas status ctx. lineWidth = 4; // you can specify the width of the needle. strokeStyle = "#616161"; // sets the needle color ctx. translate (300,300); // set ctx for canvas bullets. rotate (I * PI/30); // angle * Math. PI/180 = radian, set the Rotation Angle ctx. beginPath (); // start a path ctx. moveTo (0,-287); // the start point of the relative canvas dot path ctx. lineTo (0,-283); // the end point of the dot path relative to the canvas ctx. closePath (); // end a path ctx. stroke (); // practically draws the path ctx defined by the moveTo () and lineTo () methods. restore (); // The restore () method sets the drawing status to the saved value} for (var I = 0; I <12; I ++) {ctx. save (); ctx. lineWidth = 4; ctx. strokeStyle = gradient; ctx. translate (300,300); ctx. rotate (I * PI/6); ctx. beginPath (); ctx. moveTo (0,-287); ctx. lineTo (0,-278); ctx. closePath (); ctx. stroke (); ctx. restore ();} // ctx. save (); ctx. lineWidth = 3; ctx. strokeStyle = "# 0f0f0f"; ctx. translate (300,300); ctx. rotate (hour * PI/6 + second * PI/108000); ctx. beginPath (); ctx. moveTo (0,-238); ctx. lineTo (0, 10); ctx. closePath (); ctx. stroke (); ctx. restore (); // sub-needle ctx. save (); ctx. lineWidth = 3; ctx. strokeStyle = "#010101"; ctx. translate (300,300); ctx. rotate (Minute * PI/30 + second * PI/1800); ctx. beginPath (); ctx. moveTo (0,-258); ctx. lineTo (0, 15); ctx. closePath (); ctx. stroke (); ctx. restore (); // seconds for ctx. save (); ctx. strokeStyle = "# ff100d"; ctx. lineWidth = 3; ctx. translate (300,300); ctx. rotate (second * PI/30); ctx. beginPath (); ctx. moveTo (0,-278); ctx. lineTo (0, 20); ctx. closePath (); ctx. stroke (); ctx. beginPath (); // The second-hand point of the hour-hand minute needle ctx. arc (0, 0, 6, 0, 2 * PI, false); ctx. closePath (); ctx. fillStyle = "# fff"; ctx. fill (); ctx. stroke (); ctx. restore (); requestAnimationFrame (drawBig); // interface for animation modification}; drawBig (); setInterval (drawBig, 1000); // redraw once every 1 s }; return {canvasClock: _ canvasClock ,}}())
I was going to encapsulate the task. It's time to get off work. It's flying ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
