Before learning the canvas elements in the next HTML5, in order to practice practicing on the realization of a simple clock. The clock itself is not complex, and does not use the picture to beautify, but though small spite, the following share with you:
Demo Effect:
HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Clock</title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
. canvas{
margin-left:20px;
margin-top:20px;
Border:solid 1px;
}
</style>
<body onload= "main ()" >
<canvas class = "Canvas" id= "canvasid" width = ' 500px ' height = ' 400px ' ></canvas>
<script type= "text/javascript" src = "clock.js" ></script>
</body>
JS Code:
Copy Code code as follows:
var Canvas = {};
CANVAS.CXT = document.getElementById (' Canvasid '). GetContext (' 2d ');
Canvas.point = function (x, y) {
this.x = x;
This.y = y;
};
/* Erase all graphics on canvas * *
CANVAS.CLEARCXT = function () {
var me = this;
var canvas = Me.cxt.canvas;
Me.cxt.clearRect (0,0, Canvas.offsetwidth, canvas.offsetheight);
};
* * Clock
Canvas.clock = function () {
var me = Canvas,
c = ME.CXT,
RADIUS = 150,/* radius * *
Scale = 20,/* Scale length * *
Minangle = (1/30) *math.pi,/* One minute of radian * *
Hourangle = (1/6) *math.pi,/* One hour of radian * *
Hourhandlength = RADIUS/2,/* Clockwise length * *
Minhandlength = radius/3*2,/* Minute hand length * *
Sechandlength = radius/10*9,/* seconds length * *
Center = new Me. Point (C.CANVAS.WIDTH/2, C.CANVAS.HEIGHT/2); /* Center *
/* Draw the center of the Circle (dial centre) * *
function Drawcenter () {
C.save ();
C.translate (center.x, CENTER.Y);
C.fillstyle = ' black ';
C.beginpath ();
C.arc (0, 0, radius/20, 0, 2*math.pi);
C.closepath ();
C.fill ();
C.stroke ();
C.restore ();
};
/* Draw dial with coordinate transform * *
function Drawbackground () {
C.save ();
C.translate (center.x, CENTER.Y); /* Translation Transform * *
/* Draw Scale * *
function Drawscale () {
C.moveto (Radius-scale, 0);
C.lineto (RADIUS, 0);
};
C.beginpath ();
C.arc (0, 0, radius, 0, 2*math.pi, true);
C.closepath ();
for (var i = 1; I <= i++) {
Drawscale ();
C.rotate (Hourangle); /* Rotation Transform * *
};
/* Drawing Time (3,6,9,12) * *
C.font = "Bold 30px impack"
C.filltext ("3", 110, 10);
C.filltext ("6",-7, 120);
C.filltext ("9",-120, 10);
C.filltext ("12",-16,-100);
C.stroke ();
C.restore ();
};
/* Draw Clockwise (H: Current time (24 hour)) * *
This.drawhourhand = function (h) {
H = h = = 0? 24:h;
C.save ();
C.translate (center.x, CENTER.Y);
C.rotate (3/2*MATH.PI);
C.rotate (H*hourangle);
C.beginpath ();
C.moveto (0, 0);
C.lineto (hourhandlength, 0);
C.stroke ();
C.restore ();
};
/* Draw the Minute hand (M: current) * *
This.drawminhand = function (m) {
m = m = = 0? 60:m;
C.save ();
C.translate (center.x, CENTER.Y);
C.rotate (3/2*MATH.PI);
C.rotate (M*minangle);
C.beginpath ();
C.moveto (0, 0);
C.lineto (minhandlength, 0);
C.stroke ();
C.restore ();
};
/* Draw second hand (s: current seconds) * *
This.drawsechand = function (s) {
s = s = = 0? 60:s;
C.save ();
C.translate (center.x, CENTER.Y);
C.rotate (3/2*MATH.PI);
C.rotate (S*minangle);
C.beginpath ();
C.moveto (0, 0);
C.lineto (sechandlength, 0);
C.stroke ();
C.restore ();
};
* * Draw the clock according to the native time.
This.drawclock = function () {
var me = this;
function Draw () {
var date = new Date ();
CANVAS.CLEARCXT ();
Drawbackground ();
Drawcenter ();
Me.drawhourhand (date.gethours () + date.getminutes ()/60);
Me.drawminhand (date.getminutes () + date.getseconds ()/60);
Me.drawsechand (Date.getseconds ());
}
Draw ();
SetInterval (draw, 1000);
};
};
var main = function () {
var clock = new Canvas.clock ();
Clock.drawclock ();
};
Some simple canvas element APIs are involved in the code. You can be a mother.
The above is the entire content of this article, I hope to learn canvas can help.
