JavaScript canvasアニメーションは時計の効果を実現します。


本論文の例では、canvasアニメーションのクロック効果を実現するための具体的なコードを共有しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>    </title>
</head>
<body>
  <canvas width="150" height="150" id="canvas"></canvas>
</body>
</html>
<script>
  clock();//   
  setInterval(clock,1000);//        ,      
  function clock(){
    var now = new Date();//          
    var second = now.getSeconds(),
      min = now.getMinutes(),
      hour = now.getHours();//      
      hour = hour > 12?hour-12:hour;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,150,150);//      
    ctx.save();
    ctx.translate(75,75);//       
    ctx.scale(0.4,0.4);//    
    ctx.rotate(-Math.PI/2);//  x   -90
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 8;
    ctx.lineCap = 'round';

    //       
    ctx.save();
    ctx.beginPath();
    for(var i = 0;i<12;i++)
    {
      ctx.rotate(Math.PI/6);
      ctx.moveTo(100,0);
      ctx.lineTo(120,0);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//   
    ctx.save();
    
    //       
    ctx.beginPath();
    ctx.lineWidth = 5;
    for(var i = 0;i < 60; i++)
    {
      if(i % 5 != 0)
      {
        ctx.moveTo(117,0);
        ctx.lineTo(120,0);
      }
      ctx.rotate(Math.PI/30);//  6 
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//   
    ctx.save();

    //     
    ctx.beginPath();
    ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//         
    ctx.lineWidth = 14;
    ctx.moveTo(-20,0);
    ctx.lineTo(75,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//  
    ctx.save();

    //     
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);//        
    ctx.moveTo(-28,0);
    ctx.lineTo(102,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//  
    ctx.save();


    //     
    ctx.beginPath();
    ctx.rotate(Math.PI/30*second);
    ctx.strokeStyle = '#D40000';
    ctx.lineWidth = 6;
    ctx.moveTo(-30,0);
    ctx.lineTo(83,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//  
    ctx.save();

    //    
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#325Fa2';
    ctx.arc(0,0,142,0,Math.PI*2,true);//  142
    ctx.stroke();
    ctx.closePath();
    ctx.restore()//  
    ctx.restore()//  


  }
</script>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。