devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

H5画布canvas特效（旋转跳跃不停歇）_h5 canvas 加载gif 后左右跳

作者：很楠不爱3 | 2024-02-14 17:43:26

赞

踩

h5 canvas 加载gif 后左右跳
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
  6. <script type="text/javascript" src="../js/vue.js"></script>
  7. <link href="../css/bootstrap.css" rel="stylesheet">
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9. <style>
  10. .panel{
  11. margin:20% auto auto 35%;
  12. }
  13. .input{
  14. width:500px;
  15. height:30px;
  16. }
  17. .btn{
  18. width:515px;
  19. height:40px;
  20. }
  21. .input_form{
  22. float:left;
  23. margin:-35% 0 0 25%;
  24. position:absolute;
  25. }
  26. </style>
  27. <title>Login</title>
  28. </head>
  29. <body>
  30. <canvas id="canvas"  width="1902" height="950"></canvas>
  31. <script>
  32.  
  33.  
  34. function project3D(x, y, z, vars) {
  35. var p, d;
  36. x -= vars.camX;
  37. y -= vars.camY - 8;
  38. z -= vars.camZ;
  39. p = Math.atan2(x, z);
  40. d = Math.sqrt(x * x + z * z);
  41. x = Math.sin(p - vars.yaw) * d;
  42. z = Math.cos(p - vars.yaw) * d;
  43. p = Math.atan2(y, z);
  44. d = Math.sqrt(y * y + z * z);
  45. y = Math.sin(p - vars.pitch) * d;
  46. z = Math.cos(p - vars.pitch) * d;
  47. var rx1 = -1000;
  48. var ry1 = 1;
  49. var rx2 = 1000;
  50. var ry2 = 1;
  51. var rx3 = 0;
  52. var ry3 = 0;
  53. var rx4 = x;
  54. var ry4 = z;
  55. var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
  56. var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
  57. var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
  58. if (!z)
  59. z = 0.000000001;
  60. if (ua > 0 && ua<1&&ub>0 && ub < 1) {
  61. return {
  62. x : vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale,
  63. y : vars.cy + y / z * vars.scale,
  64. d : (x * x + y * y + z * z)
  65. }
  66. } else {
  67. return {
  68. d : -1
  69. }
  70. }
  71. }
  72. function elevation(x, y, z) {
  73. var dist = Math.sqrt(x * x + y * y + z * z);
  74. if (dist && z / dist >= -1 && z / dist <= 1)
  75. return Math.acos(z / dist);
  76. return 0.00000001
  77. }
  78. function rgb(col) {
  79. col += 0.000001;
  80. var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
  81. var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
  82. var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
  83. return "#" + r.toString(16) + g.toString(16) + b.toString(16)
  84. }
  85. function interpolateColors(RGB1, RGB2, degree) {
  86. var w2 = degree;
  87. var w1 = 1 - w2;
  88. return [ w1 * RGB1[0] + w2 * RGB2[0], w1 * RGB1[1] + w2 * RGB2[1],
  89. w1 * RGB1[2] + w2 * RGB2[2] ]
  90. }
  91. function rgbArray(col) {
  92. col += 0.000001;
  93. var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256);
  94. var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256);
  95. var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256);
  96. return [ r, g, b ]
  97. }
  98. function colorString(arr) {
  99. var r = parseInt(arr[0]);
  100. var g = parseInt(arr[1]);
  101. var b = parseInt(arr[2]);
  102. return "#" + ("0" + r.toString(16)).slice(-2)
  103. + ("0" + g.toString(16)).slice(-2)
  104. + ("0" + b.toString(16)).slice(-2)
  105. }
  106. function process(vars) {
  107. if (vars.points.length < vars.initParticles)
  108. for (var i = 0; i < 5; ++i)
  109. spawnParticle(vars);
  110. var p, d, t;
  111. p = Math.atan2(vars.camX, vars.camZ);
  112. d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
  113. d -= Math.sin(vars.frameNo / 80) / 25;
  114. t = Math.cos(vars.frameNo / 300) / 165;
  115. vars.camX = Math.sin(p + t) * d;
  116. vars.camZ = Math.cos(p + t) * d;
  117. vars.camY = -Math.sin(vars.frameNo / 220) * 15;
  118. vars.yaw = Math.PI + p + t;
  119. vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
  120. var t;
  121. for (var i = 0; i < vars.points.length; ++i) {
  122. x = vars.points[i].x;
  123. y = vars.points[i].y;
  124. z = vars.points[i].z;
  125. d = Math.sqrt(x * x + z * z) / 1.0075;
  126. t = .1 / (1 + d * d / 5);
  127. p = Math.atan2(x, z) + t;
  128. vars.points[i].x = Math.sin(p) * d;
  129. vars.points[i].z = Math.cos(p) * d;
  130. vars.points[i].y += vars.points[i].vy * t
  131. * ((Math.sqrt(vars.distributionRadius) - d) * 2);
  132. if (vars.points[i].y > vars.vortexHeight / 2 || d < .25) {
  133. vars.points.splice(i, 1);
  134. spawnParticle(vars)
  135. }
  136. }
  137. }
  138. function drawFloor(vars) {
  139. var x, y, z, d, point, a;
  140. for (var i = -25; i <= 25; i += 1) {
  141. for (var j = -25; j <= 25; j += 1) {
  142. x = i * 2;
  143. z = j * 2;
  144. y = vars.floor;
  145. d = Math.sqrt(x * x + z * z);
  146. point = project3D(x, y - d * d / 85, z, vars);
  147. if (point.d != -1) {
  148. size = 1 + 15000 / (1 + point.d);
  149. a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  150. if (a > 0) {
  151. vars.ctx.fillStyle = colorString(interpolateColors(
  152. rgbArray(d / 26 - vars.frameNo / 40), [ 0, 128,
  153. 32 ], .5 + Math.sin(d / 6
  154. - vars.frameNo / 8) / 2));
  155. vars.ctx.globalAlpha = a;
  156. vars.ctx.fillRect(point.x - size / 2, point.y - size
  157. / 2, size, size)
  158. }
  159. }
  160. }
  161. }
  162. vars.ctx.fillStyle = "#82f";
  163. for (var i = -25; i <= 25; i += 1) {
  164. for (var j = -25; j <= 25; j += 1) {
  165. x = i * 2;
  166. z = j * 2;
  167. y = -vars.floor;
  168. d = Math.sqrt(x * x + z * z);
  169. point = project3D(x, y + d * d / 85, z, vars);
  170. if (point.d != -1) {
  171. size = 1 + 15000 / (1 + point.d);
  172. a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  173. if (a > 0) {
  174. vars.ctx.fillStyle = colorString(interpolateColors(
  175. rgbArray(-d / 26 - vars.frameNo / 40), [ 32, 0,
  176. 128 ], .5 + Math.sin(-d / 6
  177. - vars.frameNo / 8) / 2));
  178. vars.ctx.globalAlpha = a;
  179. vars.ctx.fillRect(point.x - size / 2, point.y - size
  180. / 2, size, size)
  181. }
  182. }
  183. }
  184. }
  185. }
  186. function sortFunction(a, b) {
  187. return b.dist - a.dist
  188. }
  189. function draw(vars) {
  190. vars.ctx.globalAlpha = .15;
  191. vars.ctx.fillStyle = "#000";
  192. vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
  193. drawFloor(vars);
  194. var point, x, y, z, a;
  195. for (var i = 0; i < vars.points.length; ++i) {
  196. x = vars.points[i].x;
  197. y = vars.points[i].y;
  198. z = vars.points[i].z;
  199. point = project3D(x, y, z, vars);
  200. if (point.d != -1) {
  201. vars.points[i].dist = point.d;
  202. size = 1 + vars.points[i].radius / (1 + point.d);
  203. d = Math.abs(vars.points[i].y);
  204. a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8;
  205. vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a : 0;
  206. vars.ctx.fillStyle = rgb(vars.points[i].color);
  207. if (point.x > -1 && point.x<vars.canvas.width&&point.y> - 1
  208. && point.y < vars.canvas.height)
  209. vars.ctx.fillRect(point.x - size / 2, point.y - size / 2,
  210. size, size)
  211. }
  212. }
  213. vars.points.sort(sortFunction)
  214. }
  215. function spawnParticle(vars) {
  216. var p, ls;
  217. pt = {};
  218. p = Math.PI * 2 * Math.random();
  219. ls = Math.sqrt(Math.random() * vars.distributionRadius);
  220. pt.x = Math.sin(p) * ls;
  221. pt.y = -vars.vortexHeight / 2;
  222. pt.vy = vars.initV / 20 + Math.random() * vars.initV;
  223. pt.z = Math.cos(p) * ls;
  224. pt.radius = 200 + 800 * Math.random();
  225. pt.color = pt.radius / 1000 + vars.frameNo / 250;
  226. vars.points.push(pt)
  227. }
  228. function frame(vars) {
  229. if (vars === undefined) {
  230. var vars = {};
  231. vars.canvas = document.querySelector("canvas");
  232. vars.ctx = vars.canvas.getContext("2d");
  233. vars.canvas.width = document.body.clientWidth;
  234. vars.canvas.height = document.body.clientHeight;
  235. window.addEventListener("resize", function() {
  236. vars.canvas.width = document.body.clientWidth;
  237. vars.canvas.height = document.body.clientHeight;
  238. vars.cx = vars.canvas.width / 2;
  239. vars.cy = vars.canvas.height / 2
  240. }, true);
  241. vars.frameNo = 0;
  242. vars.camX = 0;
  243. vars.camY = 0;
  244. vars.camZ = -14;
  245. vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI
  246. / 2;
  247. vars.yaw = 0;
  248. vars.cx = vars.canvas.width / 2;
  249. vars.cy = vars.canvas.height / 2;
  250. vars.bounding = 10;
  251. vars.scale = 500;
  252. vars.floor = 26.5;
  253. vars.points = [];
  254. vars.initParticles = 1000;
  255. vars.initV = .01;
  256. vars.distributionRadius = 800;
  257. vars.vortexHeight = 25
  258. }
  259. vars.frameNo++;
  260. requestAnimationFrame(function() {
  261. frame(vars)
  262. });
  263. process(vars);
  264. draw(vars)
  265. }
  266. frame();
  267. </script>
  268. <form id="form" class="input_form">
  269. <div class="panel">
  270. <input class="input" type="text" /><br /> <br />
  271. <button type="submit" class="btn">Submit</button>
  272. </div>
  273. </form>
  274. </body>
  275. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/80865
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号