使用javascript生成的植物显示过程特效
查看效果:http://keleyi.com/keleyi/phtml/html5/33.htm
.NET版本:http://keleyi.com/a/bjac/66mql4bc.htm
完整HTML文件代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用javascript生成的植物显示过程特效 - 柯乐义</title><base target="_blank" /> <style>html, body {background: black;}a{color:white;text-decoration:none} .hovertreefrme{height:700px;width:760px;border:solid 1px red; } </style> </head> <body> <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> <canvas id="hovertree"></canvas> </div> <script> (function () { 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;speed = 1;W = 350;H = 500;transformations = [ [ (function (x, y) { return 0; }), (function (x, y) { return 0.16 * y; }), 1 ], [ (function (x, y) { return 0.2 * x - 0.26 * y; }), (function (x, y) { return 0.23 * x + 0.22 * y + 1.6; }), 7 ], [ (function (x, y) { return -0.15 * x + 0.28 * y; }), (function (x, y) { return 0.26 * x + 0.24 * y + 0.44; }), 7 ], [ (function (x, y) { return 0.85 * x + 0.04 * y; }), (function (x, y) { return -0.04 * x + 0.85 * y + 1.6; }), 85 ] ];maxDraws = 200000;xRange = [-2.182, 2.6558];yRange = [0, 9.9983];keleyicanvas = document.getElementById("hover"+"tree");keleyicanvas.width = W;keleyicanvas.height = H;styles = { position: "absolute", top: "400px", left: "300px", margin: "-" + (~~(H / 2)) + "px 0 0 -" + (~~(W / 2)) + "px" };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)"]];animationCurve = function (frame) { if (frame < 1000) return 25; if (frame < 5000) return 50; if (frame < 10000) return 75; if (frame < 20000) return 100; if (frame < 40000) return 150; if (frame < 65000) return 250; if (frame < 90000) return 400; if (frame < 150000) return 600; if (frame < 190000) return 400; if (frame < 200000) return 100; };lut = {};numDraws = 0;pMax = 0;for (_i = 0, _len = transformations.length; _i < _len; _i++) { row = transformations[_i]; for (i = pMax, _ref = row[2] + pMax - 1; pMax <= _ref ? i <= _ref : i >= _ref; pMax <= _ref ? i++ : i--) { lut[i] = [row[0], row[1]]; } pMax += row[2]; }getColors = function () { var colors; colors = colorStops.slice(); return function () { var colorStop; if (!(colors[0] && numDraws >= colors[0][0])) return; colorStop = colors.shift(); return ctx.fillStyle = colorStop[1]; }; };for (k in styles) { v = styles[k]; keleyicanvas.style[k] = v; }window.ctx = keleyicanvas.getContext("2d");xSpan = xRange[1] - xRange[0];ySpan = yRange[1] - yRange[0];window.updateColor = getColors();render = function () { var drawsPerFrame, f, i, iter, x, y, _ref2, _ref3; if (numDraws > maxDraws) return; updateColor(); drawsPerFrame = speed * animationCurve(numDraws); for (i = 0; 0 <= drawsPerFrame ? i <= drawsPerFrame : i >= drawsPerFrame; 0 <= drawsPerFrame ? i++ : i--) { iter = 0; _ref2 = [rand(xRange[0], xRange[1]), rand(yRange[0], yRange[1])], x = _ref2[0], y = _ref2[1]; while (iter++ < 50) { f = lut[~~rand(0, pMax)]; _ref3 = [f[0](x, y), f[1](x, y)], x = _ref3[0], y = _ref3[1]; } x = W * (x - xRange[0]) / xSpan; y = H * (1 - y / ySpan); ctx.fillRect(x, y, 1, 1); } return numDraws += drawsPerFrame; };window.onclick = function () { numDraws = 0; window.updateColor = getColors(); return ctx.clearRect(0, 0, W, H); };rand = function (a, b) { return (b - a) * Math.random() + a; };window.requestAnimationFrame || (window.requestAnimationFrame = (function () { var prefix, r, _j, _len2, _ref2; _ref2 = ['webkit', 'moz', 'ms', 'o']; for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { prefix = _ref2[_j]; if (r = window["" + prefix + "RequestAnimationFrame"]) return r; } return function (callback) { return window.setTimeout(callback, 1000 / 60); }; })());(step = function () { return requestAnimationFrame(step) && render(); })();}).call(this);</script> </body> </html>
web前端汇总 : http://www.cnblogs.com/jihua/p/webfront.html
转载于:https://www.cnblogs.com/jihua/p/html5tree.html
使用javascript生成的植物显示过程特效相关推荐
- JavaScript和CSS实现详情图片显示大图特效
<!doctype html> <html> <head><title>JavaScript和CSS实现详情图片显示大图特效</title> ...
- JavaScript + CSS3 实现的海报画廊特效
原文:JavaScript + CSS3 实现的海报画廊特效 这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解 ...
- pdfstamper生成pdf无法显示汉字_正点原子STM32F4/F7水星开发板资料连载第四十六章 汉字显示实验...
1)实验平台:正点原子水星 STM32F4/F7 开发板 2)摘自<STM32F7 开发指南(HAL 库版)>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载 ...
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimj... DIV <div id="qrcode" ...
- unity鼠标点击显示粒子特效
参考链接:(51条消息) unity 两个相机叠加 - CSDN (51条消息) [Unity]鼠标点击在屏幕上产生特效_SuperWiwi的博客-CSDN博客_unity点击特效 (51条消息) U ...
- 03、网页和网页的显示过程
目录 网页 网页的显示过程 网页 网站和网页的关系? 一个网站由N个网页组成(N >=1) 比如我们打开jd的网站.在浏览器访问域名https://www.jd.com/ 点击其中一个位置进行跳 ...
- html在线随机抽取,利用纯html+javascript实现随机抽取显示
求助:利用纯html+javascript实现随机抽取显示 1 一个智力问答页面,每次显示一个判断题,最多可以连续答10题.题目从固定的10个问题中随机抽出一个且不能重复. 2 问题只有两种答案,对或 ...
- [转载][记录]javascript生成不重复的随机数
参考链接:javascript生成不重复的随机数 项目播放视频,是无序的,有上下两个按钮,所以需要生成1,8不重复的随机数数组,如: 7,4,8,6,1,5,3,2 然后再split一次,就是数组了. ...
- Bootstrap HTML 编码规范之JavaScript生成的标签
JavaScript生成的标签 通过 JavaScript 生成的标签让内容变得不易查找.编辑,并且降低性能.能避免时尽量避免. 关于作者 歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HT ...
最新文章
- 你陪我长大 我陪你变老
- 基于ESP32的竞赛裁判系统功能调试-激光信号调试
- zabbix 进阶(二)
- 关于mysql内存管理_MYSQL内存管理及优化
- Android Studio 导入应用时报错 Error:java.lang.RuntimeException: Some file crunching failed, see logs for de
- 黑客大佬:我是如何让50个文件一起骗过AI安防系统的?
- 声明jpa批注处理器_如何使用反射基于JPA批注记录您的数据模型
- 个人觉得好的文章链接推荐【转载,侵权立删】
- python三维模型_python三维模型
- 亲测无限坐席在线客服系统源码
- KVM虚拟化基础概念
- 实用的 Python —— 使用虚拟环境 virtualenv(Linux)
- 网络中的网络 NiN 动手学深度学习v2 pytorch
- 苹果雪豹操作系统正式版_大家一起来聊聊电脑操作系统那些事
- data-toggle=dropdown/data-target/data-dismiss/data-backdrop/data-spy/data-slide/data-source是什么意思?
- 中国剩余定理求解同余线性方程组(模数互素和非互素的情况)
- 【devops】非必要 不要自建harbor 能力不足 真的被坑的服了 阿里云ACR不香吗?k8s接入ACR
- 探讨顶级 Layer 1 智能合约区块链的代币经济学
- LeetCode——复数乘法 C++
- 累加器 java_Spark笔记之累加器(Accumulator)