Home > Developer > Web Develop
HTML5 Canvas Clock
Demo Source: http://www.huiyi8.com/divcss/
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>html clock</title>
<body>
<canvas width= "height=" id= "Clock" >
Your browser does not support canvas tags and the hour hand does not show up!
</canvas>
<script type= "Text/javascript" >
Canvas background color
var clockbackgroundcolor = "#ABCDEF";
Hour hand Color
var hourpointcolor = "#000";
Hour hand weight
var hourpointwidth = 7;
Hour hand length
var hourpointlength = 100;
Minute hand Color
var minpointcolor = "#000";
Minute hand thickness
var minpointwidth = 5;
Minute hand length
var minpointlength = 150;
Second hand color
var secpointcolor = "#F00";
Second hand thickness
var secpointwidth = 3;
Second hand 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's large scale
var scalebiglength = 15;
The 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 for the hour-hand canvas (artboard)
var panel = Clock.getcontext (' 2d ');
Draw Line
/**
* Draw line Segments
*
*
*/
function Drowline (p,width,color,startx,starty,endx,endy,ran,cx,cy) {
Save the incoming artboard, which is equivalent to opening a new layer each time you paint
P.save ();
Set Brush width
P.linewidth = width;
Set Brush color
P.strokestyle = color;
New open drawing path to avoid interference with content on previous artboards
P.beginpath ();
P.translate (Cx,cy);
Rotating
P.rotate (RAN);
Move the brush to the start position HTML5 template
P.moveto (Startx,starty);
Move brush to end position
P.lineto (Endx,endy);
Draw Line Operations
P.stroke ();
Close the drawing path to avoid interfering with the content drawn on the artboard later
P.closepath ();
Overlay a layer on an incoming artboard 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);
}
/**
* Draw Circles
*/
function Drowcircle (p,width,color,centrex,centrey,r) {
P.save ();
Set Brush width
P.linewidth = width;
Set Brush color
P.strokestyle = color;
New open drawing path to avoid interference with content on previous artboards
P.beginpath ();
Draw a Circle
P.arc (Centrex,centrey,r,0,360,false);
Draw Line Operations
P.stroke ();
Close the drawing path to avoid interfering with the content drawn on the artboard later
P.closepath ();
Overlay a layer on an incoming artboard object
P.restore ();
}
function Drowpoint (p,width,color,centrex,centrey,r) {
P.save ();
Set Brush width
P.linewidth = width;
Set Brush color
P.fillstyle = color;
New open drawing path to avoid interference with content on previous artboards
P.beginpath ();
Draw a Circle
P.arc (Centrex,centrey,r,0,360,false);
Draw Line Operations
P.fill ();
Close the drawing path to avoid interfering with the content drawn on the artboard later
P.closepath ();
Overlay a layer on an incoming artboard object
P.restore ();
}
function Drowscales (p) {
Draw Small Scale
for (var i = 0;i < 60;i++) {
Drowhorizontalline (p,scalesmallwidth,scalesmalllength,scalecolor,195-scalesmalllength,0,i*6*math.pi/ 180,250,250);
}
Draw 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 ("contact author [email protected]", 10,20);
Panel.filltext ("Http://kipy.xicp.net", 10,40);
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 ', -5,0,0,250,250);
}
Drowhorizontalline (panel,7,30, ' #F00 ', 0,0,math.pi,250,250);
Drowclock ();
SetInterval (drowclock,1000);
function Save () {
var image = Clock.todataurl ("Image/png"). Replace ("Image/png", "Image/octet-stream");
Location.href=image;
}
</script>
</body>
HTML5 Canvas Clock
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
