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

黄舟
リリース: 2017-03-25 15:52:09
オリジナル
1548 人が閲覧しました

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

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

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

<script type="text/javascript" src="clock.js">
</script>
ログイン後にコピー

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

var extra=document.createElement(&#39;p&#39;);
    extra.style.position=&#39;absolute&#39;;
    var extra_canvas=document.createElement(&#39;canvas&#39;);
    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(&#39;remove&#39;);
        }
  
  */
  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(&#39;2d&#39;);
  
  extra.style.left=currentRectX+&#39;px&#39;;
  extra.style.top=currentRectY+&#39;px&#39;;
  //console.log(currentRectX,currentRectY);
  //context.fillStyle=&#39;#FF0000&#39;;
  //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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート