HTML5 how do I draw a "clock" pattern using canvas? (Code instance)

This chapter introduces how HTML5 uses canvas to draw a "clock" pattern? (code example), there is a certain reference value, the need for friends can refer to, I hope to help you.

I. Introduction of Canvas

Canvas is a rectangular canvas with a specified length and width, we will use the new HTML5 JavaScript, and use the HTML5 JS API to draw a variety of shapes. However, the canvas itself does not have the ability to draw (it is just a container for graphics)-You must use a script to accomplish the actual drawing task.

Most browsers now support canvas, so you can create a new canvas before using canvas.

<canvas id= "MyCanvas" width= "height=" ></canvas>

Second, the properties and methods commonly used in canvas

Colors and styles:

FillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
Strokestyle Sets or returns the color, gradient, or pattern used for a stroke
Shadowcolor Sets or returns the color used for shadows

Rectangular:

Rect () creates a rectangle
FillRect () Draws a "filled" rectangle
Strokerect () Draw Rectangle (no fill)
Clearrect () clears the specified pixel within the given rectangle

Path:

Fill () fills the current drawing (path)
Stroke () draws a defined path
Beginpath () starts a path or resets the current path
MoveTo () Moves the path to the specified point in the canvas without creating a line
Closepath () Creates a path from the current point back to the starting point
LineTo () Adds a new point and creates a line from that point to the last specified point in the canvas
Clip () cuts an area of any shape and size from the original canvas
Quadraticcurveto () Create two Bezier curves
Beziercurveto () Create three-cubic Bezier curve
Arc () Create ARC/curve (used to create circular or partial circles)
ArcTo () creates an arc/curve between two tangents
Ispointinpath () returns True if the specified point is in the current path, otherwise false

Text:

Font Sets or returns the current font property of the text content
TextAlign Sets or returns the current alignment of text content
Textbaseline Sets or returns the current text baseline that is used when drawing text
Filltext () Draw "filled" text on canvas
Stroketext () Draw text on canvas (no fill)
Measuretext () Returns the object that contains the specified text width

Image rendering:

DrawImage () Drawing an image, canvas, or video to the canvas

Iii. drawing of watches and clocks

Start by creating a new HTML file, creating a new artboard, and adding some styling to the artboard, like this

<! DOCTYPE html>
Then start working on the canvas

<script>//gets the canvas label and creates the context object var canvas = document.getElementById (' canvas '), context = Canvas.getcontext ( ' 2d '), deg = Math.pi/180;context.translate (at;</script>)
Description: The GetContext ("2d") object is a built-in HTML5 object that has a variety of drawing paths, rectangles, circles, characters, and methods for adding images, Deg calculates the position of the Pi, translate () canvas.
1. Create dial, number, scale, center point

Create a watch face

Context.beginpath (); Context.arc (0, 0, deg, 0,); context.linewidth = 3;context.stroke (); Context.closepath ();
Create a number

Create a number for (var i = 1; i <=; i++) {  context.beginpath ();  Context.save ();  Context.rotate (* * i * deg);  context.textalign = ' center ';  if (i% 3 = = 0) {      Context.fillstyle = ' red ';      Context.font = "normal 28px Arial";      Context.filltext (i, 0, -110);  } else {      Context.font = "normal 20px Arial";      Context.filltext (i, 0, -120);  }  Context.restore ();  Context.closepath ();}
Create a scale

for (var i = 1; i <=; i++) {    context.beginpath ();    Context.save ();    Context.rotate (6 * i * deg);    Context.moveto (0, -150);    Judging the scale display color    if (i% = = 0) {        Context.strokestyle = ' red ';        Context.linewidth = 3;        Context.lineto (0, -135);        Context.stroke ();    } else if (i% 5 = = 0) {        context.strokestyle = ' orange ';        Context.linewidth = 2;        Context.lineto (0, -140);        Context.stroke ();    } else {        Context.strokestyle = ' #000 ';        Context.linewidth = 1;        Context.lineto (0, -145);        Context.stroke ();    }    Context.restore ();    Context.closepath ();}
Create a center point

Context.beginpath (); Context.arc (0, 0, 5, 0, deg); Context.fill (); Context.closepath ();
：


2. Creating pointers

var nowdate = new Date (), hour = nowdate.gethours ()%, Minu = Nowdate.getminutes (), second = Nowdate.getsec Onds (); var ms = Nowdate.getmilliseconds (); MS//Seconds Context.beginpath (); Context.save (); Context.linewidth = 1; Context.strokestyle = ' red '; Context.rotate (6*SECOND*DEG); Context.rotate ((ms/1000 + second) * 6 * deg); Context.moveto (0, 20); Context.lineto (0,-130); Context.stroke (); Context.restore (); Context.closepath (); Minute hand context.beginpath (); Context.save (); Context.linewidth = 2; Context.strokestyle = ' orange '; Context.rotate ((Second/60+minu) *6*deg); Context.rotate ((ms/1000/60 + second/60 + minu) * 6 * deg); Context.moveto (0, 10); Context.lineto (0,-120); Context.stroke (); Context.restore (); Context.closepath (); Hour Context.beginpath (); Context.save (); Context.linewidth = 3; Context.strokestyle = ' #000 '; Context.rotate ((second/3600+minu/60+hour) *30*deg); Context.rotate ((ms/1000/60/60 + second/60/60 + MINU/60 + hour) * * deg); ConText.moveto (0, 0); Context.lineto (0,-110); Context.stroke (); Context.restore (); Context.closepath ();
：


Do not think to the end of the present, I loudly tell you no, now is just the beginning, the next is to witness the miracle of the moment ...

3. Final completion

We need to encapsulate the above drawing into a method, and then keep drawing it all the way, and the clock is moving.

function Dialplate () {//Create dial//context.clearrect ( -150,-150,400,400);//Clear Canvas context.beginpath ();    Context.arc (0, 0, 0, deg);    Context.linewidth = 3;    Context.stroke ();    Context.closepath ();        Create tick for (var i = 1; i <=; i++) {Context.beginpath ();        Context.save ();        Context.rotate (6 * i * deg);        Context.moveto (0,-150);            if (i% = = 0) {Context.strokestyle = ' red ';            Context.linewidth = 3;            Context.lineto (0,-135);        Context.stroke ();            } else if (i% 5 = = 0) {Context.strokestyle = ' orange ';            Context.linewidth = 2;            Context.lineto (0,-140);        Context.stroke ();            } else {context.strokestyle = ' #000 ';            Context.linewidth = 1;            Context.lineto (0,-145);        Context.stroke ();        } context.restore ();    Context.closepath ();        }//Create a number for (var i = 1; i <=; i++) {Context.beginpath ();        Context.save ();        Context.rotate (* * i * deg);        context.textalign = ' center ';            if (i% 3 = = 0) {Context.fillstyle = ' red ';            Context.font = "normal 28px Arial";        Context.filltext (i, 0,-110);            } else {Context.font = "normal 20px Arial";        Context.filltext (i, 0,-120);        } context.restore ();    Context.closepath ();    }//center point Context.beginpath ();    Context.arc (0, 0, 5, 0, deg);    Context.fill (); Context.closepath ();} function Pointer () {//create pointer var nowdate = new Date (), hour = nowdate.gethours ()%, Minu = Nowdate.getm    Inutes (), second = Nowdate.getseconds (); var ms = Nowdate.getmilliseconds ();    MS//Seconds Context.beginpath ();    Context.save ();    Context.linewidth = 1;    Context.strokestyle = ' red ';    Context.rotate (6*SECOND*DEG);    Context.rotate ((ms/1000 + second) * 6 * deg);    Context.moveto (0, 20); ContexT.lineto (0,-130);    Context.stroke ();    Context.restore ();    Context.closepath ();    Minute hand context.beginpath ();    Context.save ();    Context.linewidth = 2;    Context.strokestyle = ' orange ';    Context.rotate ((Second/60+minu) *6*deg);    Context.rotate ((ms/1000/60 + second/60 + minu) * 6 * deg);    Context.moveto (0, 10);    Context.lineto (0,-120);    Context.stroke ();    Context.restore ();    Context.closepath ();    Hour Context.beginpath ();    Context.save ();    Context.linewidth = 3;    Context.strokestyle = ' #000 ';    Context.rotate ((second/3600+minu/60+hour) *30*deg);    Context.rotate ((ms/1000/60/60 + second/60/60 + MINU/60 + hour) * * deg);    Context.moveto (0, 0);    Context.lineto (0,-110);    Context.stroke ();    Context.restore (); Context.closepath ();} Dialplate (); Pointer (); SetInterval (function () {dialplate (); Pointer ();},1000/60)
 Description: Animations are best performed 60 times per second, so the timer does not allow him to execute 60 times in seconds.