preface

Recently, the company used some statistical charts in its project, and OF course I used the third-party class library. When I was at home at the weekend, I thought of Canvas drawing, so I got familiar with it and made a small example of clocks and watches, as shown in the picture:



Although the appearance is ugly, but the function is not a little bit, next to say how to achieve.

Introduction to canvas

Most browsers now support Canvas, so you need to create a new canvas before using canvas, and that’s it

<canvas id="myCanvas" width="200" height="100"></canvas>
Copy the code

Then I’ll talk about some common properties and methods:

Colors and styles

  • FillStyle sets or returns the color, gradient, or mode used to fill the painting
  • StrokeStyle sets or returns the color, gradient, or mode used for the stroke
  • ShadowColor Sets or returns the color used for the shadow

rectangular

  • Rect () creates the rectangle
  • FillRect () draws the “filled” rectangle
  • StrokeRect () draws rectangle (no fill)
  • ClearRect () clears the specified pixels in the given rectangle

The path

  • Fill () fills the current drawing (path)
  • Stroke () draws the defined path
  • BeginPath () starts a path or resets the current path
  • MoveTo () moves the path to a specified point on the canvas, without creating lines
  • ClosePath () creates a path from the current point back to the starting point
  • LineTo () adds a new point, and then creates a line on the canvas from that point to the last specified point
  • Clip () cuts areas of arbitrary shape and size from the original canvas
  • QuadraticCurveTo () creates a quadratic Bezier curve
  • BezierCurveTo () creates a cubic Bezier curve
  • Arc () creates arcs/curves (used to create circles or partial circles)
  • ArcTo () creates an arc/curve between two tangents
  • IsPointInPath () returns true if the specified point is in the current path, false otherwise

The text

  • Font Sets or returns the current font properties for the text content
  • TextAlign Sets or returns the current alignment of text content
  • TextBaseline sets or returns the current textBaseline used when drawing text
  • FillText () draws the “filled” text on the canvas
  • StrokeText () Draws text on the canvas (no fill)
  • MeasureText () returns an object containing the specified text width

Image painting

  • DrawImage () Draws an image, canvas, or video to the canvas

That’s all for today.

Draw the clock

I’m going to create a new HTML file, create a new artboard and add some styles to the artboard, like this

<! DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>Clocks and watches</title>
        <style>
	#canvas {
	    border: 1px solid # 000;
	    margin: 0 auto;
	    display: block;
	}
        </style>
    </head>
    <body>
	<! -- New Artboard -->
	<canvas id="canvas" width="400" height="400"></canvas>
    </body>
</html>
Copy the code

And then I’m going to do canvas,

// Get the Canvas tag and create the context object
var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	deg = Math.PI/180;
context.translate(200.200);	Copy the code

The getContext(” 2D “) object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images, deG calculates PI, and translate() the position of the canvas

Create dial, number, scale, center point

Create the dial

context.beginPath();
context.arc(0.0.150.0.360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();
Copy the code

Create digital

// Create a number
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * 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();
}
Copy the code

To create calibration

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0.- 150.);
    // Determine the scale display color
    if (i % 15= =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();
}
Copy the code

Create a central point

 context.beginPath();
 context.arc(0.0.5.0.360 * deg);
 context.fill();
 context.closePath();
Copy the code

As shown in figure:

Create a pointer

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); / / ms
 / / second hand
 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();
 / / the 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) * 30 * deg);
 context.moveTo(0.0);
 context.lineTo(0.- 110.);
 context.stroke();
 context.restore();
 context.closePath();
Copy the code

As shown in figure:



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

Finally completed

We need to encapsulate the drawing up there as a method, and then we keep drawing and cleaning it up so that the clock is moving

Function dialPlate() {// create a dial //context.clearRect(-150,-150,400,400); // Clear the canvas context.beginPath(); context.arc(0, 0, 150, 0, 360 * deg); context.lineWidth = 3; context.stroke(); context.closePath(); // create a scale for (var I = 1; i<= 60; i{+ +)context.beginPath(a);context.save(a);context.rotate(6 * i * deg);
        context.moveTo(0.- 150.);
        if (i % 15= =0) {
            context.strokeStyle = 'red';
            context.lineWidth = 3;
            context.lineTo(0.- 135.);
            context.stroke(a); }else if (i % 5= =0) {
            context.strokeStyle = 'orange';
            context.lineWidth = 2;
            context.lineTo(0.- 140.);
            context.stroke(a); }else {
            context.strokeStyle = '# 000';
            context.lineWidth = 1;
            context.lineTo(0.- 145.);
            context.stroke(a); }context.restore(a);context.closePath(a); } // Create a numberfor (var i = 1; i< =12. i{+ +)context.beginPath(a);context.save(a);context.rotate(30 * 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(a);context.closePath(a); } // Center pointcontext.beginPath(a);context.arc(0.0.5.0.360 * deg);
    context.fill(a);context.closePath(a); }function Pointer() {// Create pointervar nowdate = new Date(),
        hour = nowdate.getHours() % 12.minu = nowdate.getMinutes(),
        second = nowdate.getSeconds();
    var ms = nowdate.getMilliseconds();// milliseconds // second handcontext.beginPath(a);context.save(a);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(a);context.restore(a);context.closePath(a); / / the minute handcontext.beginPath(a);context.save(a);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(a);context.restore(a);context.closePath(a); / / hourcontext.beginPath(a);context.save(a);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) * 30 * deg);
    context.moveTo(0.0);
    context.lineTo(0.- 110.);
    context.stroke(a);context.restore(a);context.closePath(a); }dialPlate(a);Pointer(a);setInterval(function() {dialPlate(a);Pointer(a); },1000/60)
Copy the code

Animation 60 times per second is the best, so the timer just let him not second 60 times. Now it is really over, a simple canvas drawing clock is completed. I hope you can click a STAR on the project as your recognition and support for this project, thank you. I heard that long handsome little brother and long beautiful little sister will praise.

Project address: github.com/Mr-MengBo/C…