2 exemples d'animation de rotation HTML5 Canvas-Tutoriel H5-php.cn

2 exemples d'animation de rotation HTML5 Canvas

不言

Libérer： 2018-06-22 15:07:59

original

2175 Les gens l'ont consulté

Cet article présente principalement deux exemples de code d'animation de rotation HTML5 Canvas, qui implémente un effet Tai Chi rotatif. Les amis qui apprennent l'animation de rotation HTML5 Canvas peuvent se référer au

Rendu :
2 exemples d'animation de rotation HTML5 Canvas .

Méthode 1 :

<!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(&#39;myCanvas&#39;); 

  var context = canvas.getContext(&#39;2d&#39;); 

  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>

Copier après la connexion

Méthode 2 :

<!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(&#39;myCanvas&#39;); 

  var ctx = canvas.getContext("2d"); 

  var angle = 0; 

  var count = 360; 

  var clrA = &#39;#000&#39;; 

  var clrB = &#39;red&#39;; 

  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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour. Tout le monde apprend. Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Comment utiliser le canevas HTML5 pour faire tomber des flocons de neige

Comment utiliser jQuery et HTML5 pour créer le tremblement du téléphone Les effets spéciaux du changement de vêtements

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!