当前位置:Gxlcms > 前端框架 > canvas如何实现七巧板图案和粒子时钟效果?(代码示例)

canvas如何实现七巧板图案和粒子时钟效果?(代码示例)

时间:2021-07-01 10:21:17 帮助过:83人阅读

canvas如何实现七巧板图案和粒子时钟效果?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

canvas实现七巧板


  1. <canvas id="canvas" width="800" height="800"></canvas>
  2. <script>
  3. var rangram = [
  4. { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },
  5. { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" },
  6. { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
  7. { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f51a" },
  8. { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },
  9. { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },
  10. { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" },
  11. ]
  12. var canvas = document.getElementById('canvas');
  13. if (canvas.getContext) {
  14. var context = canvas.getContext("2d");
  15. for(var i = 0; i < rangram.length; i++){
  16. draw(rangram[i],context);
  17. }
  18. }
  19. function draw(seat,context){
  20. context.beginPath();
  21. var pointArr = seat.p;
  22. context.moveTo(pointArr[0].x, pointArr[0].y);
  23. for(var i = 1; i < pointArr.length; i++){
  24. context.lineTo(pointArr[i].x, pointArr[i].y);
  25. }
  26. context.closePath();
  27. context.fillStyle=seat.color;
  28. context.fill();
  29. context.lineWidth=3;
  30. context.stroke();
  31. context.shadowColor='#ddd';
  32. context.shadowBlur=30;
  33. }

canvas实现粒子时钟


  1. <canvas id="canvas"></canvas>
  2. <script src="./digit.js"></script>
  3. <script>
  4. var SCREEN_WIDTH = document.body.clientWidth;
  5. var SCREEN_HEIGHT = document.body.clientHeight;
  6. var currentTime = null;
  7. var MARGIN_LEFT = Math.round(SCREEN_WIDTH / 10);
  8. var MARGIN_TOP = Math.round(SCREEN_HEIGHT / 10);
  9. var RADIUS = Math.round(SCREEN_WIDTH * 4 / 5 / 108) - 1;
  10. var timerArr = [];
  11. var balls = [];
  12. const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
  13. window.onload = function () {
  14. var canvas = document.getElementById('canvas');
  15. var context = canvas.getContext("2d");
  16. canvas.width = SCREEN_WIDTH;
  17. canvas.height = SCREEN_HEIGHT;
  18. if (canvas.getContext) {
  19. var context = canvas.getContext('2d');
  20. setInterval(function () {
  21. upData();
  22. rander(context);
  23. }, 50);
  24. }
  25. }
  26. function upData() {
  27. currentTime = new Date();
  28. var curHours = currentTime.getHours();
  29. var curMinutes = currentTime.getMinutes();
  30. var curSeconds = currentTime.getSeconds();
  31. var HoursOne = parseInt(curHours / 10);
  32. var HoursTwo = parseInt(curHours % 10);
  33. var MinutesOne = parseInt(curMinutes / 10);
  34. var MinutesTwo = parseInt(curMinutes % 10);
  35. var SecondsOne = parseInt(curSeconds / 10);
  36. var SecondsTwo = parseInt(curSeconds % 10);
  37. if (HoursOne != timerArr[0]) {
  38. addBalls(MARGIN_LEFT + 0, MARGIN_TOP, HoursOne);
  39. }
  40. if (HoursTwo != timerArr[1]) {
  41. addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, HoursTwo);
  42. }
  43. if (MinutesOne != timerArr[2]) {
  44. addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, MinutesOne);
  45. }
  46. if (MinutesTwo != timerArr[3]) {
  47. addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, MinutesTwo);
  48. }
  49. if (SecondsOne != timerArr[4]) {
  50. addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, SecondsOne);
  51. }
  52. if (SecondsTwo != timerArr[5]) {
  53. addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, SecondsTwo);
  54. }
  55. timerArr = [HoursOne, HoursTwo, MinutesOne, MinutesTwo, SecondsOne, SecondsTwo];
  56. updataBall();
  57. }
  58. function updataBall() {
  59. for (var i = 0; i < balls.length; i++) {
  60. balls[i].x = balls[i].x + balls[i].vx;
  61. balls[i].vy = balls[i].vy + balls[i].g;
  62. balls[i].y = balls[i].y + balls[i].vy;
  63. if (balls[i].y + RADIUS > SCREEN_HEIGHT) {
  64. balls[i].y = SCREEN_HEIGHT - RADIUS;
  65. balls[i].vy = - balls[i].vy * 0.8;
  66. }
  67. }
  68. var t = 0;
  69. for (var i = 0; i < balls.length; i++) {
  70. if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < SCREEN_WIDTH) {
  71. balls[t++] = balls[i];
  72. }
  73. }
  74. while(balls.length > t){
  75. balls.pop();
  76. }
  77. }
  78. function addBalls(x, y, number) {
  79. for (var i = 0; i < digit[number].length; i++)
  80. for (var j = 0; j < digit[number][i].length; j++)
  81. if (digit[number][i][j] == 1) {
  82. var obj = {
  83. x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
  84. y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
  85. g: 1.5 + Math.random(),
  86. vx: Math.pow(-1, Math.ceil(Math.random() * 100)) * 4,
  87. vy: -5,
  88. color: colors[Math.floor(Math.random() * colors.length)]
  89. }
  90. balls.push(obj);
  91. }
  92. }
  93. function rander(context) {
  94. context.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  95. var hours = currentTime.getHours();
  96. var minutes = currentTime.getMinutes();
  97. var seconds = currentTime.getSeconds();
  98. renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), context)
  99. renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), context)
  100. renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, context)
  101. renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), context);
  102. renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), context);
  103. renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, context);
  104. renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), context);
  105. renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), context);
  106. randerBall(context);
  107. }
  108. function randerBall(context) {
  109. for (var i = 0; i < balls.length; i++) {
  110. context.fillStyle = balls[i].color;
  111. context.beginPath();
  112. context.arc(balls[i].x, balls[i].y, RADIUS, 0, Math.PI * 2, 0);
  113. context.closePath();
  114. context.fill();
  115. }
  116. }
  117. function renderDigit(x, y, number, context) {
  118. context.fillStyle = 'rgb(0,102,153)';
  119. for (var i = 0; i < digit[number].length; i++)
  120. for (var j = 0; j < digit[number][i].length; j++)
  121. if (digit[number][i][j] == 1) {
  122. context.beginPath();
  123. context.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
  124. context.closePath();
  125. context.fill()
  126. }
  127. }
  128. </script>


  1. digit =
  2. [
  3. [
  4. [0,0,1,1,1,0,0],
  5. [0,1,1,0,1,1,0],
  6. [1,1,0,0,0,1,1],
  7. [1,1,0,0,0,1,1],
  8. [1,1,0,0,0,1,1],
  9. [1,1,0,0,0,1,1],
  10. [1,1,0,0,0,1,1],
  11. [1,1,0,0,0,1,1],
  12. [0,1,1,0,1,1,0],
  13. [0,0,1,1,1,0,0]
  14. ],//0
  15. [
  16. [0,0,0,1,1,0,0],
  17. [0,1,1,1,1,0,0],
  18. [0,0,0,1,1,0,0],
  19. [0,0,0,1,1,0,0],
  20. [0,0,0,1,1,0,0],
  21. [0,0,0,1,1,0,0],
  22. [0,0,0,1,1,0,0],
  23. [0,0,0,1,1,0,0],
  24. [0,0,0,1,1,0,0],
  25. [1,1,1,1,1,1,1]
  26. ],//1
  27. ......

更多炫酷html5、javascript特效代码,尽在: javascript特效 栏目!!

以上就是canvas如何实现七巧板图案和粒子时钟效果?(代码示例)的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行