The importance of canvas elements in HTML5 is unusual. With JS lets us achieve the powerful function of painting in the browser page. No longer rely solely on images, flash and other external files, reduce HTTP requests, resulting in faster page loading.
Simple line Segments:
See a little demo canvas small House
Do not use the function of dead people ....
Rotating:
Use the Rotate () method provided. It should be noted that the origin should be repositioned before rotation. In general, the endpoints of the images that will be rotated are redirected to the origin, which is the basis for rotation. That means positioning first, then setting the rotation angle, and finally drawing. Watch a demo canvas fan. This is much more convenient than a line of drawing.
To fill an image with a gradient color:
is divided into radial and linear gradients, somewhat similar to the CSS3 gradient operation. No need to use the image to do the gradient background.
See a demo canvas stereoscopic ball.
With these methods you can do a clock, pure canvas+js, not using pictures.
View effects Canvas Clock
The complete code:
[HTML]View Plaincopy
- <span style="Font-family:microsoft yahei;font-size:14px;" ><! DOCTYPE HTML>
- <html>
- <head>
- <metac charset=UTF-8>
- <title> Clock </title>
- </head>
- <body>
- <canvas id="Canvas" width="height=" > Please update the browser version </ Canvas>
- <script>
- var can=document.getElementById ("canvas");
- var cxt=Can.getcontext ("2d");
- function Drawclock () {
- Clear Canvas
- Cxt.clearrect (0, 0, 500, 500);
- Get current time
- var time=New Date ();
- var hours=time.gethours ();
- var mins=time.getminutes ();
- var secs=time.getseconds ();
- Convert to 12 binary
- hours=hours>12?hours-12:hours;
- The hour must get floating point type, cannot show only the whole hour
- hours=hours+mins/60;
- Draw the Dial first
- cxt.linewidth=10;
- cxt.strokestyle="Blue";
- Cxt.beginpath ();
- Cxt.arc (+, 0, ();
- Cxt.closepath ();
- Cxt.stroke ();
- Draw the moment
- for (Var i=0;i<12;i++) {
- Cxt.save ();
- Cxt.beginpath ();
- cxt.linewidth=7;
- cxt.strokestyle="BLACK";
- Rotate according to the center of the circle, good calculation
- Cxt.translate (250, 250);
- Cxt.rotate (i*30*math.pi/180);
- Cxt.beginpath ();
- Cxt.moveto (0,-170);
- Cxt.lineto (0,-190);
- Cxt.closepath ();
- Cxt.stroke ();
- Cxt.restore ();
- }
- for (Var i=0;i<60;i++) {
- Cxt.save ();
- Cxt.beginpath ();
- cxt.linewidth=5;
- cxt.strokestyle="BLACK";
- Rotate according to the center of the circle, good calculation
- Cxt.translate (250, 250);
- Cxt.rotate (i*6*math.pi/180);
- Cxt.beginpath ();
- Cxt.moveto (0,-180);
- Cxt.lineto (0,-190);
- Cxt.closepath ();
- Cxt.stroke ();
- Cxt.restore ();
- }
- Draw the hour hand
- Cxt.save ();
- cxt.linewidth=7;
- cxt.strokestyle="BLACK";
- Cxt.translate (250, 250);
- Cxt.rotate (hours*30*math.pi/180);
- Cxt.beginpath ();
- Cxt.moveto (0, 15);
- Cxt.lineto (0,-130);
- Cxt.closepath ();
- Cxt.stroke ();
- Cxt.restore ();
- Minute
- Cxt.save ();
- cxt.linewidth=5;
- cxt.strokestyle="BLACK";
- Cxt.translate (250, 250);
- Cxt.rotate (mins*6*math.pi/180);
- Cxt.beginpath ();
- Cxt.moveto (0, 15);
- Cxt.lineto (0,-150);
- Cxt.closepath ();
- Cxt.stroke ();
- Cxt.restore ();
- Seconds
- Cxt.save ();
- cxt.linewidth=3;
- cxt.strokestyle="Red";
- Cxt.translate (250, 250);
- Cxt.rotate (secs*6*math.pi/180);
- Cxt.beginpath ();
- Cxt.moveto (0, 15);
- Cxt.lineto (0,-172);
- Cxt.closepath ();
- Cxt.stroke ();
- To beautify a small dot in the middle of a picture
- Cxt.beginpath ();
- Cxt.arc (0, 0, 6, 0, N, false);
- Cxt.closepath ();
- cxt.fillstyle="BLACK";
- Cxt.fill ();
- Cxt.stroke ();
- Draw a small dot in front of the second hand
- Cxt.beginpath ();
- Cxt.arc (0, -150, 8, 0, N, false);
- Cxt.closepath ();
- cxt.fillstyle="BLACK";
- Cxt.fill ();
- Cxt.stroke ();
- Cxt.restore ();
- }
- To avoid drawing after waiting 1 seconds to open, call first
- Drawclock ();
- SetInterval (drawclock,1000);
- </Script>
- </body>
- </html></span>
Web front-end development learning----9. Use canvas to draw a clock
