查看效果：http://keleyi.com/keleyi/phtml/html5/33.htm

.NET版本：http://keleyi.com/a/bjac/66mql4bc.htm

完整HTML文件代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>使用javascript生成的植物显示过程特效 - 柯乐义</title><base target="_blank" />
  5. <style>html, body {background: black;}a{color:white;text-decoration:none}
  6. .hovertreefrme{height:700px;width:760px;border:solid 1px red; }
  7. </style>
  8. </head>
  9. <body>
  10. <div class="hovertreefrme"><div><a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/a/bjae/4d3jagcj.htm">原文</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://hovertree.com">HoverTree</a> <a href="http://keleyi.com/a/bjac/66mql4bc.htm">参考</a></div>
  11. <canvas id="hovertree"></canvas>
  12. </div>
  13. <script>
  14. (function () {
  15. var H, W, animationCurve, keleyicanvas, colorStops, getColors, i, k, lut, maxDraws, numDraws, pMax, rand, render, row, speed, step, styles, transformations, v, xRange, xSpan, yRange, ySpan, _i, _len, _ref;
  16.  
  17. speed = 1;
  18.  
  19. W = 350;
  20.  
  21. H = 500;
  22.  
  23. transformations = [
  24. [
  25. (function (x, y) {
  26. return 0;
  27. }), (function (x, y) {
  28. return 0.16 * y;
  29. }), 1
  30. ], [
  31. (function (x, y) {
  32. return 0.2 * x - 0.26 * y;
  33. }), (function (x, y) {
  34. return 0.23 * x + 0.22 * y + 1.6;
  35. }), 7
  36. ], [
  37. (function (x, y) {
  38. return -0.15 * x + 0.28 * y;
  39. }), (function (x, y) {
  40. return 0.26 * x + 0.24 * y + 0.44;
  41. }), 7
  42. ], [
  43. (function (x, y) {
  44. return 0.85 * x + 0.04 * y;
  45. }), (function (x, y) {
  46. return -0.04 * x + 0.85 * y + 1.6;
  47. }), 85
  48. ]
  49. ];
  50.  
  51. maxDraws = 200000;
  52.  
  53. xRange = [-2.182, 2.6558];
  54.  
  55. yRange = [0, 9.9983];
  56.  
  57. keleyicanvas = document.getElementById("hover"+"tree");
  58.  
  59. keleyicanvas.width = W;
  60.  
  61. keleyicanvas.height = H;
  62.  
  63. styles = {
  64. position: "absolute",
  65. top: "400px",
  66. left: "300px",
  67. margin: "-" + (~~(H / 2)) + "px 0 0 -" + (~~(W / 2)) + "px"
  68. };
  69.  
  70. colorStops = [[0, "rgba(255,255,255,1)"], [1000, "rgba(253,253,52,0.6)"], [5000, "rgba(0,171,56,0.7)"], [10000, "rgba(168,210,110,0.7)"], [20000, "rgba(246,243,27,0.6)"], [40000, "rgba(138,215,39,0.7)"], [65000, "rgba(243,205,8,0.5)"], [90000, "rgba(150,204,104,0.4)"], [125000, "rgba(137,230,101,0.5)"], [150000, "rgba(246,243,27,0.5)"], [190000, "rgba(255,255,255,0.8)"]];
  71.  
  72. animationCurve = function (frame) {
  73. if (frame < 1000) return 25;
  74. if (frame < 5000) return 50;
  75. if (frame < 10000) return 75;
  76. if (frame < 20000) return 100;
  77. if (frame < 40000) return 150;
  78. if (frame < 65000) return 250;
  79. if (frame < 90000) return 400;
  80. if (frame < 150000) return 600;
  81. if (frame < 190000) return 400;
  82. if (frame < 200000) return 100;
  83. };
  84.  
  85. lut = {};
  86.  
  87. numDraws = 0;
  88.  
  89. pMax = 0;
  90.  
  91. for (_i = 0, _len = transformations.length; _i < _len; _i++) {
  92. row = transformations[_i];
  93. for (i = pMax, _ref = row[2] + pMax - 1; pMax <= _ref ? i <= _ref : i >= _ref; pMax <= _ref ? i++ : i--) {
  94. lut[i] = [row[0], row[1]];
  95. }
  96. pMax += row[2];
  97. }
  98.  
  99. getColors = function () {
  100. var colors;
  101. colors = colorStops.slice();
  102. return function () {
  103. var colorStop;
  104. if (!(colors[0] && numDraws >= colors[0][0])) return;
  105. colorStop = colors.shift();
  106. return ctx.fillStyle = colorStop[1];
  107. };
  108. };
  109.  
  110. for (k in styles) {
  111. v = styles[k];
  112. keleyicanvas.style[k] = v;
  113. }
  114.  
  115. window.ctx = keleyicanvas.getContext("2d");
  116.  
  117. xSpan = xRange[1] - xRange[0];
  118.  
  119. ySpan = yRange[1] - yRange[0];
  120.  
  121. window.updateColor = getColors();
  122.  
  123. render = function () {
  124. var drawsPerFrame, f, i, iter, x, y, _ref2, _ref3;
  125. if (numDraws > maxDraws) return;
  126. updateColor();
  127. drawsPerFrame = speed * animationCurve(numDraws);
  128. for (i = 0; 0 <= drawsPerFrame ? i <= drawsPerFrame : i >= drawsPerFrame; 0 <= drawsPerFrame ? i++ : i--) {
  129. iter = 0;
  130. _ref2 = [rand(xRange[0], xRange[1]), rand(yRange[0], yRange[1])], x = _ref2[0], y = _ref2[1];
  131. while (iter++ < 50) {
  132. f = lut[~~rand(0, pMax)];
  133. _ref3 = [f[0](x, y), f[1](x, y)], x = _ref3[0], y = _ref3[1];
  134. }
  135. x = W * (x - xRange[0]) / xSpan;
  136. y = H * (1 - y / ySpan);
  137. ctx.fillRect(x, y, 1, 1);
  138. }
  139. return numDraws += drawsPerFrame;
  140. };
  141.  
  142. window.onclick = function () {
  143. numDraws = 0;
  144. window.updateColor = getColors();
  145. return ctx.clearRect(0, 0, W, H);
  146. };
  147.  
  148. rand = function (a, b) {
  149. return (b - a) * Math.random() + a;
  150. };
  151.  
  152. window.requestAnimationFrame || (window.requestAnimationFrame = (function () {
  153. var prefix, r, _j, _len2, _ref2;
  154. _ref2 = ['webkit', 'moz', 'ms', 'o'];
  155. for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
  156. prefix = _ref2[_j];
  157. if (r = window["" + prefix + "RequestAnimationFrame"]) return r;
  158. }
  159. return function (callback) {
  160. return window.setTimeout(callback, 1000 / 60);
  161. };
  162. })());
  163.  
  164. (step = function () {
  165. return requestAnimationFrame(step) && render();
  166. })();
  167.  
  168. }).call(this);
  169.  
  170. </script>
  171. </body>
  172. </html>

web前端汇总 : http://www.cnblogs.com/jihua/p/webfront.html

使用javascript生成的植物显示过程特效的更多相关文章

  1. JavaScript + CSS3 实现的海报画廊特效

    原文:JavaScript + CSS3 实现的海报画廊特效 这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解 ...

  2. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  3. 【原创】网站抓包HttpWebRequest不返回Javascript生成的Cookie的解决办法

    前言: 最近在做中国移动爬虫的过程中,首先遇到的就是 在某个请求中,有一个名为“WT_PFC"的cookie键值是由前端JavaScript生成的,没有进入到HttpWebResponse中 ...

  4. javascript生成自定义的arcgis simpletoolbar

    javascript生成自定义的arcgis simpletoolbar 最近在学习ARCGIS for Javascript过程中,在ESRI的在线帮助上看见了这样一个示例,查看源码后,觉得左侧工具 ...

  5. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  6. 浅谈移动端 View 的显示过程

    作者:个推安卓开发工程师 一七 随着科技的发展,各种移动端早已成为人们日常生活中不可或缺的部分,人们使用移动端产品工作.社交.娱乐……移动端界面的流畅性已经成为影响用户体验的重要因素之一.那么你是否思 ...

  7. JQuery实现密码有短暂的显示过程和实现 input hint效果

    目录: 一.实现目的 二.问题思考 三.解决办法 1.输入用户名 2.输入密码短暂显示 一.实现目的 这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程,如下图: 二.问题思 ...

  8. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  9. 修改u-boot的开机logo及显示过程【转】

    本文转载自;http://blog.csdn.net/voice_shen/article/details/6789424 [ u-boot: Git://git.denx.de/u-boot.git ...

随机推荐

  1. python发送邮件及附件

    今天给大伙说说python发送邮件,官方的多余的话自己去百度好了,还有一大堆文档说实话不到万不得已的时候一般人都不会去看,回归主题: 本人是mac如果没有按照依赖模块的请按照下面的截图安装 导入模块如 ...

  2. 【Win10 应用开发】扫描和连接Wi-fi网络

    老周今天带大家去“扫雷”了,别当真,是扫描并连接指定无线网络,时尚一点叫Wi-fi. 所以,今天的任务要求你的设备至少有1张无线网卡,目前老周没看到过有N张无线网卡的设备.像笔记本.平板等设备都可以, ...

  3. zyUpload+struct2完成文件上传

    前言: 最近在写自己的博客网站,算是强化一下自己对s2sh框架的理解.期间遇到了很多问题,这些问题在写之前都考虑过,感觉也就是那样吧.但正真遇到了,也挺让人难受的.就利用zyUpload这个js插件实 ...

  4. PHP中有关正则表达式的函数集锦

    之前学正则表达式的目的是想从网上抓取点小说啊,文档啊,还有获取相应的视频连接然后批量下载.当时初学PHP根本不知道PHP有专门抓包的工具,就像Simple_html_dom.php(在我的其他博文中有 ...

  5. 【转】 个人认为，这是最详细的 android------HttpURLConnection 类用法详解。一些教材没讲到的，它讲到了

    站在巨人的肩膀上,渐渐进步. 原文链接:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnection连接Se ...

  6. 如何为RD网关创建自建签名的证书

    创建安全的RD网关是一件非常好的事情,这样可以在公网环境下直接远程接入内部的已开启远程访问的主机服务器. 建立这个安全的RD网关需要的材料有RD网关本身,以及一个证书.由于一般情况下这些在RD网关后面 ...

  7. 使用RMAN创建复制数据库

    我的实验环境: - 源数据库A机: RHEL6.4 + Oracle 11.2.0.4 IP地址:192.168.99.159 db_name=oradb 数据库已正常运行 - 复制数据库B机: RH ...

  8. 第三方侧滑菜单SlidingMenu在android studio中的使用

    南尘:每天进步一点点! 前面讲了官方的侧滑菜单DrawerLayout的使用,其实早在官方没有推出这个之前,就有很多第三方的jar包如SlidingMenu等,感谢开源的力量. SlidingMenu ...

  9. 无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Word._Application”。

    无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Wor ...

  10. 机器学习 1 linear regression 作业(二)

    这个线性回归的作业需要上传到https://inclass.kaggle.com/c/ml2016-pm2-5-prediction 上面,这是一个kaggle比赛的网站.第一次接触听说这个东西,恰好 ...