html5的canvas旋转动画

以你之姓@ 2022-07-13 06:16 252阅读 0赞

<!DOCTYPE HTML> 
    
      <html> 
    
      <body> 
    
      <canvas id="myCanvas" width="500" height="500">your browser does not support the canvas tag</canvas> 
    
      <script type="text/javascript"> 
    
      var deg = 0; 
    
      var r = 30; 
    
      var rl = 100; 
    
      function drawTaiji() { 
    
      var canvas = document.getElementById('myCanvas'); 
    
      var context = canvas.getContext('2d'); 
    
      var colorA = "rgb(0, 0, 0)"; 
    
      var colorB = "red"; 
    
      
    
      var px =Math.sin(deg)*r; 
    
      var py =Math.cos(deg)*r; 
    
      context.clearRect(0, 0, 300, 300); 
    
      context.beginPath(); 
    
      context.fillStyle = colorA; 
    
      context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      context.fillStyle = colorB; 
    
      context.beginPath(); 
    
      context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      context.fillStyle = colorB; 
    
      context.beginPath(); 
    
      context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      context.fillStyle = colorA; 
    
      context.beginPath(); 
    
      context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      context.fillStyle = colorA; 
    
      context.beginPath(); 
    
      context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      context.fillStyle = colorB; 
    
      context.beginPath(); 
    
      context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true); 
    
      context.closePath(); 
    
      context.fill(); 
    
      deg +=0.1; 
    
      } 
    
      setInterval(drawTaiji, 100);
    
      </script> </p>
    <p></body> 
    
      </html>

<!DOCTYPE HTML> 
    
      <html> 
    
      <body> 
    
      <canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas> 
    
      <script type="text/javascript"> 
    
      var canvas = document.getElementById('myCanvas'); 
    
      var ctx = canvas.getContext("2d"); 
    
      var angle = 0; 
    
      var count = 360; 
    
      var clrA = '#000'; 
    
      var clrB = 'red'; 
    
      
    
      function taiji(x, y, radius, angle, wise) { 
    
      angleangle = angle || 0; 
    
      wisewise = wise ? 1 : -1; 
    
      ctx.save(); 
    
      ctx.translate(x, y); 
    
      ctx.rotate(angle); 
    
      ctx.fillStyle = clrA; 
    
      ctx.beginPath(); 
    
      ctx.arc(0, 0, radius, 0, Math.PI, true); 
    
      ctx.fill(); 
    
      ctx.beginPath(); 
    
      ctx.fillStyle = clrB; 
    
      ctx.arc(0, 0, radius, 0, Math.PI, false); 
    
      ctx.fill(); 
    
      ctx.fillStyle = clrB; 
    
      ctx.beginPath(); 
    
      ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true); 
    
      ctx.fill(); 
    
      ctx.beginPath(); 
    
      ctx.fillStyle = clrA; 
    
      ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false); 
    
      ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 
    
      ctx.fill(); 
    
      ctx.beginPath(); 
    
      ctx.fillStyle = clrB; 
    
      ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true); 
    
      ctx.fill(); 
    
      ctx.restore(); 
    
      } 
    
      
    
      loop = setInterval(function () { 
    
      beginTag = true; 
    
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
    
      taiji(200, 200, 50, Math.PI * (angle / count) * 2, true); 
    
      //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false); 
    
      angle = (angle + 5) % count; 
    
      }, 50); 
    
      </script> </p>
    <p></body> 
    
      </html>