How to use html5 clock implementation (with code)

Use the alarm clock code implemented under html5. Friends who like it can refer to it.

canvas> is a new tag in HTML5, used to draw graphics. In fact, this tag and other tags Same, the special thing is that this tag can get a CanvasRenderingContext2D object, and we can control the object for drawing through the JavaScript script.

is just a container for drawing graphics. In addition to id, class, style and other attributes, There are also height and width properties. There are three main steps for drawing on the > element:

1. Get the DOM object corresponding to the element, which is a Canvas object;
2. Call the getContext() method of the Canvas object to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

Graphic transformation

Translation: context.translate(x,y), the receiving parameters are The origin translates x in the x-axis direction and y in the y-axis direction.

Scale: context.scale(x,y), the received parameters are the x coordinate axis to be scaled according to the x proportion, and the y coordinate axis to be scaled according to the y proportion.

Rotation: context.rotate(angle), the received parameter is the angle of rotation of the coordinate axis.

It should be noted that after changing the graphics, the next drawing will follow the last state, so if you need to return to the initial state, you must use context. save(); and context.restore(); to save and restore the current state:

JavaScript CodeCopy content to the clipboard

1. var canvas = document.getElementById("canvas");   
   var context = canvas.getContext("2d");   
   //translate() 
   context.save();   
   context.fillStyle = "#1424DE";   
   context.translate(10,10);   
   context.fillRect(0,0,200,200);   
   context.restore();   
   //scale() 
   context.save();   
   context.fillStyle = "#F5270B";   
   context.scale(0.5,0.5);   
   context.fillRect(500,50,200,200);   
   context.restore();   
   //rotate() 
   context.save();   
   context.fillStyle = "#18EB0F";   
   context.rotate(Math.PI / 4);   
   context.fillRect(300,10,200,200);   
   context.restore();

The effect is as follows:

Another one Related to graphics transformation are: matrix transformation: context.transform(a, b, c, d, e, f, g). The meanings of the parameters are as follows:

a Horizontal scaling (default is 1)
b Horizontal tilt (default is 0)
c Vertical tilt (default is 0)
d Vertical scaling (default is 0) 1)
e Horizontal displacement (default is 0)
f Vertical displacement (default is 0)

Readers can verify the effects of each parameter by themselves, and I will not introduce them one by one here.

The above is the detailed content of How to use html5 clock implementation (with code). For more information, please follow other related articles on the PHP Chinese website!