Erstellen Sie eine Uhr mit Canvas

Erster Schritt.

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

Dann definiert

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

eine Funktion, die die Uhr zeichnet und sie einmal pro Sekunde über den Timer aufruft. Standardmäßig wird sie einmal über den Funktionsnamen aufgerufen und dann aufgerufen durch den Timer. Denn wenn Sie es direkt mit einem Timer aufrufen, ist es 1 Sekunde langsamer als die tatsächliche Zeit

drawfun();
setInterval(drawfun,1000);

Funktionskörperinhalt:

1). , also Setzen Sie es in die erste Zeile.

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

2). Das Zeichnen des äußeren Rahmens und der Mitte der Uhr ist leicht zu erklären.

  //时钟框和圆心  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). Zeichnen Sie Stunden- und Minutenskalen.

//绘制时分刻度
       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). Zeichnen Sie die Stunden

//绘制小时数
       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).

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Uhr mit Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!