Créer une horloge avec Canvas

Première étape.

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

Puis

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

Définissez une fonction qui dessine l'horloge et l'appelez une fois par seconde via la minuterie. Par défaut, elle est appelée une fois via le nom de la fonction, puis appelée. grâce à la minuterie. Parce que si vous l'appelez directement avec une minuterie, ce sera 1 seconde plus lent que l'heure réelle

drawfun();
setInterval(drawfun,1000);

Contenu du corps de la fonction :

1). , alors mettez-le sur la première ligne.

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

2). Dessiner le cadre extérieur et le centre de l'horloge est facile à expliquer.

  //时钟框和圆心  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). Dessinez les échelles des heures et des minutes.

//绘制时分刻度
       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) Dessinez les heures

//绘制小时数
       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) Dessinez les dernières aiguilles des heures, des minutes et des secondes

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!