HTML5 キャンバスはドラッグ可能な時計のサンプル コード共有を実装します

以下は私が自作したドラッグアンドドロップしやすい小さな時計です。

それでは、それを独自のインターフェースに挿入するにはどうすればよいでしょうか?

次のコードを追加するだけです:

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

clcok.js の完全なコードは次のとおりです:

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);

以上がHTML5 キャンバスはドラッグ可能な時計のサンプル コード共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。