Comments: The Clock implemented by html5canvas. For more information, see.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> html clock </title>
</Head>
<Body>
<Canvas width = "500" height = "500" id = "clock">
Your browser does not support the canvas label. It cannot be displayed in the hour!
</Canvas>
<Script type = "text/javascript">
// Canvas background color
Var clockBackGroundColor = "# ABCDEF ";
// Hour hand color
Var hourPointColor = "#000 ";
// Clockwise width
Var hourPointWidth = 7;
// Hour Length
Var hourPointLength = 100;
// Stitch color
Var minPointColor = "#000 ";
// Width of the sub-needle
Var minPointWidth = 5;
// The length of the sub-needle
Var minPointLength = 150;
// Second-stitch color
Var secPointColor = "# F00 ";
// Second-hand width
Var secPointWidth = 3;
// Seconds Length
Var secPointLength = 170;
// Dial color
Var clockPanelColor = "# ABCDEF ";
// Dial scale Color
Var scaleColor = "#000 ";
// Dial Large Scale Width 3 6 9 12
Var scaleBigWidth = 9;
// The length of the dial with a large scale
Var scaleBigLength = 15;
// Width of the dial Small Scale
Var scaleSmallWidth = 5;
// The length of the dial Small Scale
Var scaleSmallLength = 10;
// Center color
Var centerColor = 'red ';
// Clock canvas
Var clock = document. getElementById ('clock ');
Clock. style. background = clockBackGroundColor;
// Drawing environment of the canvas on the hour hand (drawing board)
Var panel = clock. getContext ('2d ');
// Draw a line
/**
* Draw Line Segments
*
*
*/
Function drowLine (p, width, color, startX, startY, endX, endY, ran, cX, cY ){
// Save the input canvas, which is equivalent to opening a new layer for each painting
P. save ();
// Set the paint width
P. lineWidth = width;
// Set the paint brush color
P. strokeStyle = color;
// Create a new drawing path to avoid interference with the content on the canvas.
P. beginPath ();
P. translate (cX, cY );
// Rotate
P. rotate (ran );
// Move the paint brush to the start position
P. moveTo (startX, startY );
// Move the paint brush to the end position
P. lineTo (endX, endY );
// Draw line operation
P. stroke ();
// Close the drawing path to avoid interference with the content drawn on the canvas.
P. closePath ();
// Overwrite the layer on the input canvas object
P. restore ();
}
/**
* Draw a horizontal line
*/
Function drowHorizontalLine (p, width, length, color, startX, startY, ran, cX, cY ){
DrowLine (p, width, color, startX, startY, startX + length, startY, ran, cX, cY );
}
/**
* Circle
*/
Function drowCircle (p, width, color, centreX, centreY, r ){
P. save ();
// Set the paint width
P. lineWidth = width;
// Set the paint brush color
P. strokeStyle = color;
// Create a new drawing path to avoid interference with the content on the canvas.
P. beginPath ();
// Draw circles
P. arc (centreX, centreY, r, 0,360, false );
// Draw line operation
P. stroke ();
// Close the drawing path to avoid interference with the content drawn on the canvas.
P. closePath ();
// Overwrite the layer on the input canvas object
P. restore ();
}
Function drowPoint (p, width, color, centreX, centreY, r ){
P. save ();
// Set the paint width
P. lineWidth = width;
// Set the paint brush color
P. fillStyle = color;
// Create a new drawing path to avoid interference with the content on the canvas.
P. beginPath ();
// Draw circles
P. arc (centreX, centreY, r, 0,360, false );
// Draw line operation
P. fill ();
// Close the drawing path to avoid interference with the content drawn on the canvas.
P. closePath ();
// Overwrite the layer on the input canvas object
P. restore ();
}
Function drowScales (p ){
// Draw a small scale
For (var I = 0; I <60; I ++ ){
DrowHorizontalLine (p, scaleSmallWidth, scaleSmallLength, scaleColor, 195-scaleSmallLength, 0, I x 6 * Math. PI/180,250,250 );
}
// Draw a large scale
For (var I = 0; I <12; I ++ ){
DrowHorizontalLine (p, I % 3 = 0? ScaleBigWidth * 1.2: scaleBigWidth, I % 3 = 0? ScaleBigLength * 1.2: scaleBigLength, scaleColor, 195-scaleBigLength, 0, I * 30 * Math. PI/180,250,250 );
// You can add a digital scale.
}
}
Function drowHourPoint (p, hour ){
DrowHorizontalLine (p, hourPointWidth, hourPointLength, hourPointColor,-10, 0, (hour-3) * 30 * Math. PI/180,250,250 );
}
Function drowMinPoint (p, min ){
DrowHorizontalLine (p, minPointWidth, minPointLength, minPointColor,-15, 0, (min-15) * 6 * Math. PI/180,250,250 );
}
Function drowSecPoint (p, sec ){
DrowHorizontalLine (p, secPointWidth, secPointLength, secPointColor,-15, 0, (sec-15) * 6 * Math. PI/180,250,250 );
}
Function drowClock (){
Panel. clearRect (0, 0, 500,500 );
Panel. fillText ("", 10, 20 );
Panel. fillText ("<a href =" http://www.jb51.net ","> http://www.jb51.net ", </a> );
Var date = new Date ();
Var sec = date. getSeconds ();
Var min = date. getMinutes ();
Var hour = date. getHours () + min/60;
DrowCircle (panel, 7, 'Blue ', 250,250,200 );
DrowScales (panel );
DrowHourPoint (panel, hour );
DrowMinPoint (panel, min );
DrowSecPoint (panel, sec );
DrowPoint (panel, 1, centerColor, 250,250, 7 );
// DrowHorizontalLine (panel, 10, 10, 'red',-0,250,250 );
}
// DrowHorizontalLine (panel, 250,250, '# f00', Math. PI );
DrowClock ();
SetInterval (drowClock, 1000 );
Function save (){
Var image = clock. toDataURL ("image/png"). replace ("image/png", "image/octet-stream ");
Location. href = image;
}
</Script>
</Body>
</Html>
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
