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초 느려지거든요

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!