HTML5 canvas implements sample code sharing of draggable clock

The following introduces a small clock that I made myself, which is convenient for dragging.

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('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(&#39;down&#39;);
    startDragMouseX=canvasMouseX;
    startDragMouseY=canvasMouseY;
    startDragRectX=currentRectX;
    startDragRectY=currentRectY;
  }
  function canvasMouseMoveHandler(event){
      event.preventDefault(); 
    var canvasMouseX=event.screenX;
    var canvasMouseY=event.screenY;
   // console.log(&#39;move&#39;);
    currentRectX=startDragRectX+canvasMouseX-startDragMouseX;
    currentRectY=startDragRectY+canvasMouseY-startDragMouseY;
    //console.log(currentRectX,currentRectY);
    clock();
  }

  function canvasMouseUpHandler(event){
    extra_canvas.onmousemove=null;
    //console.log(&#39;up&#39;);
  }
/*  function cc(){
       clock(null,0,0);
}
*/
//window.setInterval(cc, 200);
init();
window.setInterval(clock, 200);

The above is the detailed content of HTML5 canvas implements sample code sharing of draggable clock. For more information, please follow other related articles on the PHP Chinese website!