Home > Article > Web Front-end > 2 examples of HTML5 Canvas rotation animation

2 examples of HTML5 Canvas rotation animation

不言Original: 2018-06-22 15:07:592130browse

This article mainly introduces two code examples of HTML5 Canvas rotation animation, which implements a rotating Tai Chi effect. Friends who learn HTML5 Canvas rotation animation can refer to the following

Effect diagram:
2 examples of HTML5 Canvas rotation animation

Method 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>

Method 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>

The above is the entire content of this article, I hope it will be helpful to everyone’s study, more Please pay attention to the PHP Chinese website for related content!

Related recommendations:

How to use HTML5 canvas to realize snowflakes falling

How to use jQuery and HTML5 to realize shaking of mobile phone The special effects of changing clothes

The above is the detailed content of 2 examples of HTML5 Canvas rotation animation. For more information, please follow other related articles on the PHP Chinese website!

php html5 jquery canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5's canvas implementation draws simple rectangles and trianglesNext article：HTML5's canvas implementation draws simple rectangles and triangles

See more

2 examples of HTML5 Canvas rotation animation

Related articles