Canvasを使って時計を作る

最初のステップ。

<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

次に、

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

はクロックを描画し、タイマーを通じて 1 秒ごとに呼び出す関数を定義します。デフォルトでは、関数名を通じて 1 回呼び出され、その後タイマーを通じて呼び出されます。タイマーで直接呼び出すと実際の時間より1秒遅くなるからです

drawfun();
setInterval(drawfun,1000);

関数本体の内容:

1) 各呼び出しの前にキャンバスをクリアするので、最初の行に置きます。

//清除画布ctx.clearRect(0, 0, 300, 300);

2) 時計の外枠と中心を描くのは簡単です。

  //时钟框和圆心  ctx.beginPath();
  ctx.arc(150,150,100,0,2*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle="black";
  ctx.arc(150,150,3,0,2*Math.PI);
  ctx.fill();

3) 時間と分の目盛りを描きます。

//绘制时分刻度
       for(var i=0;i<60;i++){
           ctx.save();
           ctx.beginPath();           //让画布以圆心为原点
           ctx.translate(150,150);           //每秒之间的角度
           ctx.rotate(Math.PI*2/60*i);           //开始绘制刻度
           ctx.moveTo(0,-99);           //时钟刻度
           if(i%5==0){
               ctx.strokeStyle = &#39;#333&#39;;
               ctx.lineWidth = 3;
               ctx.lineTo(0,-87);
           }else {//分钟刻度
               ctx.strokeStyle = &#39;#ccc&#39;;
               ctx.lineWidth = 2;
               ctx.lineTo(0,-90);
           }
           ctx.stroke();
           ctx.closePath();
           ctx.restore();
       }

4).時間を描きます

//绘制小时数
       for(var i=0;i<60;i++){
            ctx.beginPath();            //获取每秒秒钟之间的弧度算出小时数的坐标
            var hudu = (2*Math.PI / 360) * 6 * i;            
            var X = 150 + Math.sin(hudu) * 80 - 3.5;            
            var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
            if(i%5==0){                if(i==0){
                    ctx.fillText("12",X-3,Y);
                }else{
                    ctx.fillText("" + i / 5 + "",X,Y);
                }
                ctx.stroke();
            }
       }

5).最後に時、分、秒針を描きます

             var date = new Date();       
             var Hour = date.getHours();       //获取小时数(0-23)
       var Minute = date.getMinutes();     //获取分钟数(0-59)
       var Second = date.getSeconds();     //获取秒数(0-59)
       //绘制秒钟       ctx.save();
       ctx.beginPath();       //修改画布原点，以圆心为原点
       ctx.translate(150, 150);       //指针每秒旋转度数
       ctx.rotate(Math.PI * 2 / 60 * Second);
       ctx.strokeStyle = 'red';
       ctx.lineWidth = 1;
       ctx.moveTo(0, 20);
       ctx.lineTo(0, -70);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制分钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //当前分钟的角度加上每秒分钟旋转的角度，如果不加分钟只会当秒钟过整分的时候才会旋转
       ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 1.5;
       ctx.moveTo(0, 10);
       ctx.lineTo(0, -60);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制时钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //和分钟一样。
       ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 2.5;
       ctx.moveTo(0, 8);
       ctx.lineTo(0, -35);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();

以上がCanvasを使って時計を作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。