HTML5canvas实现可拖拽时钟的示例代码分享

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

var extra=document.createElement('p');
 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('remove');
 }
 
 */
 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);
 //绘制表盘
 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 = "grey";
 context.stroke();
 var grd = context.createLinearGradient(centerX-radius, centerY-radius,centerX+radius, centerY+radius);
 grd.addColorStop(0, "#FFFFFF"); // light blue
 grd.addColorStop(1, "#DDDDFF"); // dark blue
 context.fillStyle = grd;
 context.fill();
 context.closePath();

 //绘制数字时刻
 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();
/* //显示日期
context.beginPath();
context.TextOut(100,100,"星期");
context.closePath();
*/
 //绘制刻度
 for (var i=0;i<12;i++){
 context.beginPath();
 if(i%3){
 context.lineWidth = 3;
 context.strokeStyle = "grey";
 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();
 }
 //绘制表中心
 context.beginPath();
 context.arc(centerX, centerY, 4, 0, 2 * Math.PI, false);
 context.lineWidth = 2;
 context.strokeStyle = "grey";
 context.stroke();
 context.closePath();
 
 //绘制时针分针
 
 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('down');
 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);