代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > html教程 > HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)

HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)

html教程 围观1215次 更新日期:2017-06-25 14:48:20 留下足迹

效果图:

方法一:

代码如下:

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <canvas id="myCanvas" width="500" height="500">your browser does not support the canvas tag</canvas>  
  5. <script type="text/javascript">  
  6. var deg = 0;  
  7. var r = 30;  
  8. var rl = 100;  
  9. function drawTaiji() {  
  10. var canvas = document.getElementById('myCanvas');  
  11. var context = canvas.getContext('2d');  
  12. var colorA = "rgb(0, 0, 0)";  
  13. var colorB = "red";  
  14.  
  15. var px =Math.sin(deg)*r;  
  16. var py =Math.cos(deg)*r;  
  17. context.clearRect(0, 0, 300, 300);  
  18. context.beginPath();  
  19. context.fillStyle = colorA;  
  20. context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);  
  21. context.closePath();  
  22. context.fill();  
  23. context.fillStyle = colorB;  
  24. context.beginPath();  
  25. context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);  
  26. context.closePath();  
  27. context.fill();  
  28. context.fillStyle = colorB;  
  29. context.beginPath();  
  30. context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);  
  31. context.closePath();  
  32. context.fill();  
  33. context.fillStyle = colorA;  
  34. context.beginPath();  
  35. context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);  
  36. context.closePath();  
  37. context.fill();  
  38. context.fillStyle = colorA;  
  39. context.beginPath();  
  40. context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);  
  41. context.closePath();  
  42. context.fill();  
  43. context.fillStyle = colorB;  
  44. context.beginPath();  
  45. context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);  
  46. context.closePath();  
  47. context.fill();  
  48. deg +=0.1;  
  49. }  
  50. setInterval(drawTaiji, 100); 
  51. </script> </p><p></body>  
  52. </html> 

方法二:

代码如下:
 

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>  
  5. <script type="text/javascript">  
  6. var canvas = document.getElementById('myCanvas');  
  7. var ctx = canvas.getContext("2d");  
  8. var angle = 0;  
  9. var count = 360;  
  10. var clrA = '#000';  
  11. var clrB = 'red';  
  12.  
  13. function taiji(x, y, radius, angle, wise) {  
  14. angleangle = angle || 0;  
  15. wisewise = wise ? 1 : -1;  
  16. ctx.save();  
  17. ctx.translate(x, y);  
  18. ctx.rotate(angle);  
  19. ctx.fillStyle = clrA;  
  20. ctx.beginPath();  
  21. ctx.arc(00, radius, 0, Math.PI, true);  
  22. ctx.fill();  
  23. ctx.beginPath();  
  24. ctx.fillStyle = clrB;  
  25. ctx.arc(00, radius, 0, Math.PI, false);  
  26. ctx.fill();  
  27. ctx.fillStyle = clrB;  
  28. ctx.beginPath();  
  29. ctx.arc(wise * -0.5 * radius, 0, radius / 20, Math.PI * 2, true);  
  30. ctx.fill();  
  31. ctx.beginPath();  
  32. ctx.fillStyle = clrA;  
  33. ctx.arc(wise * +0.5 * radius, 0, radius / 20, Math.PI * 2, false);  
  34. ctx.arc(wise * -0.5 * radius, 0, radius / 100, Math.PI * 2, true);  
  35. ctx.fill();  
  36. ctx.beginPath();  
  37. ctx.fillStyle = clrB;  
  38. ctx.arc(wise * +0.5 * radius, 0, radius / 100, Math.PI * 2, true);  
  39. ctx.fill();  
  40. ctx.restore();  
  41. }  
  42.  
  43. loop = setInterval(function () {  
  44. beginTag = true;  
  45. ctx.clearRect(00, canvas.width, canvas.height);  
  46. taiji(20020050, Math.PI * (angle / count) * 2, true);  
  47. //taiji(35035050, Math.PI * ((count - angle) / count) * 2, false);  
  48. angle = (angle + 5) % count;  
  49. }, 50);  
  50. </script> </p><p></body>  
  51. </html>  

转载请注明:代码学堂>web前端 > html教程 > HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)

喜欢 (889) or 分享 (312)