HTML5 canvas drag-and-drop clock

Next we will introduce a small clock that we have made to facilitate drag and drop.

So how to insert it into your own interface?

Just add the following code:

<script type="text/javascript" src="clock.js"></script>

The complete code of clcok. JS is as follows:

VaR extra = Document. createelement ('div ');
Extra. style. Position = 'absolute ';
VaR extra_canvas = Document. createelement ('canvas ');
Extra_canvas.id = "extra_canvas ";
Extra. appendchild (extra_canvas );
Document. Body. appendchild (extra );

VaR flag;
VaR currentrectx;
VaR currentrecty;

Function Init (){
Flag = true;
Currentrectx = 0;
Currentrecty = 0;
}



Function clock (size, x, y ){
/* If (! Flag ){
Document. Body. removechild (extra_canvas );
Console. Log ('delete ');
}

*/
If (! Size) {size = 200 ;}
If (! X) x = 0;
If (! Y) y = 0;
Extra_canvas.width = size;
Extra_canvas.height = size;
Var context = extra_canvas.getContext ('2d ');

Extra. style. left = currentRectX + 'px ';
Extra. style. top = currentRectY + 'px ';
// Console. log (currentRectX, currentRectY );
// Context. fillStyle = '# FF0000 ';
// Context. fillRect (0, 0, 100,100 );
// Draw the dial
Var centerX = x + size/2;
Var centerY = y + size/2;
// Console. log (centerX, centerY );
Var radius = (size-40)/2;
Context. clearRect (x, y, x + size, y + size );
Context. beginPath ();
Context. arc (centerX, centerY, radius, 0, 2 * Math. PI, false );
Context. lineWidth = 5;
Context. strokeStyle = "gray ";
Context. stroke ();
Var grd = context. createLinearGradient (centerX-radius, centerY-radius, centerX + radius, centerY + radius );
Grd. addColorStop (0, "# FFFFFF"); // light blue
Grd. addColorStop (1, "# ddddddff"); // dark blue
Context. fillStyle = grd;
Context. fill ();
Context. closePath ();

// Draw a digital moment
Context. beginPath ();
// Context. font = "9pt ";
// Context. fontsize = 9px;
// Context. fontFamily = "Square721 BT ";
Context. fillStyle = "#0000f0"; // text color
Context. fillText ("12", centerX-7, centerY-radius + 18 );
Context. fillText ("3", centerX + radius-18, centerY + 4 );
Context. fillText ("6", centerX-3, centerY + radius-12 );
Context. fillText ("9", centerX-radius + 12, centerY + 4 );

Context. closePath ();
/* // Display date
Context. beginPath ();
Context. TextOut (100,100, "Week ");
Context. closePath ();
*/
// Draw the scale
For (var I = 0; I <12; I ++ ){
Context. beginPath ();
If (I % 3 ){
Context. lineWidth = 3;
Context. strokeStyle = "gray ";
Len = 5;
} Else {
Context. lineWidth = 6;
Context. strokeStyle = "# ff0 ";
Len = 10;
}
Arc = I/6 * Math. PI;
Kx = centerX + radius * Math. cos (arc );
Ky = centerY-radius * Math. sin (arc );
Context. moveTo (kx, ky );
Kx = centerX + (radius-len) * Math. cos (arc );
Ky = centerY-(radius-len) * Math. sin (arc );
Context. lineTo (kx, ky );

Context. stroke ();
Context. closePath ();
}
// Draw the table Center
Context. beginPath ();
Context. arc (centerX, centerY, 4, 0, 2 * Math. PI, false );
Context. lineWidth = 2;
Context. strokeStyle = "gray ";
Context. stroke ();
Context. closePath ();

// Draw the hour/minute hand
  
Var now = new Date ();
Var hour = now. getHours () % 12;
Var minute = now. getMinutes ();
Var second = now. getSeconds ();
Hour = hour + minute/60; // update the time !!
Minute = minute + second/60;

Var arc_hour = hour/6 * Math. PI;
Context. beginPath ();
Kx = centerX + (radius-40) * Math. sin (arc_hour );
Ky = centerY-(radius-40) * Math. cos (arc_hour );
Context. moveTo (kx, ky );
Kx = centerX + 10 * Math. sin (arc_hour + Math. PI );
Ky = centerY-10 * Math. cos (arc_hour + Math. PI );
Context. lineTo (kx, ky );
Context. lineWidth = 6;
Context. strokeStyle = "black ";
Context. stroke ();
Context. closePath ();

Context. beginPath ();
Var arc_minute = minute/30 * Math. PI;
Context. beginPath ();
Kx = centerX + (radius-20) * Math. sin (arc_minute );
Ky = centerY-(radius-20) * Math. cos (arc_minute );
Context. moveTo (kx, ky );
Kx = centerX + 20 * Math. sin (arc_minute + Math. PI );
Ky = centerY-20 * Math. cos (arc_minute + Math. PI );
Context. lineTo (kx, ky );
Context. lineWidth = 4;
Context. strokeStyle = "red ";
Context. stroke ();
Context. closepath ();
// Flag = false;
Context. beginpath ();
VaR arc_second = Second/30 * Math. Pi;
Context. beginpath ();
Kx = centerx + (radius-20) * Math. Sin (arc_second );
Ky = centery-(radius-20) * Math. Cos (arc_second );
Context. moveTo (kx, KY );
Kx = centerx + 20 * Math. Sin (arc_second + math. Pi );
Ky = centerY-20 * Math. Cos (arc_second + math. Pi );
Context. lineto (kx, KY );
Context. linewidth = 2;
Context. strokestyle = "gray ";
Context. Stroke ();
Context. closepath ();

}
/*
Extra. onmousedown = NULL;
Extra. onmouseup = NULL;
Extra. onmousemove = NULL;
*/
Extra_canvas.onmousedown = canvasmousedownhandler;
Extra_canvas.onmouseup = canvasMouseUpHandler;
Function canvasMouseDownHandler (event ){
Var canvasMouseX = event. screenX;
Var canvasMouseY = event. screenY;
Extra_canvas.onmousemove = canvasMouseMoveHandler;
// Console. log ('low ');
StartDragMouseX = canvasMouseX;
StartDragMouseY = canvasMouseY;
StartDragRectX = currentRectX;
StartDragRectY = currentRectY;
}
Function canvasMouseMoveHandler (event ){
Event. preventDefault ();
Var canvasMouseX = event. screenX;
Var canvasMouseY = event. screenY;
// Console. log ('move ');
CurrentRectX = startDragRectX + canvasMouseX-startDragMouseX;
CurrentRectY = startDragRectY + canvasMouseY-startDragMouseY;
// Console. log (currentRectX, currentRectY );
Clock ();
}

Function canvasMouseUpHandler (event ){
Extra_canvas.onmousemove = null;
// Console. log ('up ');
}
/* Function cc (){
Clock (null, 0, 0 );
}
*/
// Window. setInterval (cc, 200 );
Init ();
Window. setInterval (clock, 200 );

You can ignore the comments in the Code section ~

See http://blue-lg.diandian.com/webpage ~~~

 

Thank you for your attention, reprint Please note: http://www.cnblogs.com/blue-lg/archive/2012/03/22/2411490.html