HTML5 canvas 可拖拽时钟

下面介绍一个自己搞的小时钟，方便拖拽。

那么如何插入到自己的界面中呢？

只需要加上如下代码就好了：

?

clcok.js的完整代码如下：

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('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 canvasMou***=event.screenX;
var canvasMouseY=event.screenY;
extra_canvas.onmousemove=canvasMouseMoveHandler;
// console.log('down');
startDragMou***=canvasMou***;
startDragMouseY=canvasMouseY;
startDragRectX=currentRectX;
startDragRectY=currentRectY;
}
function canvasMouseMoveHandler(event){
event.preventDefault();
var canvasMou***=event.screenX;
var canvasMouseY=event.screenY;
// console.log('move');
currentRectX=startDragRectX+canvasMou***-startDragMou***;
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);