查看效果：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

使用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. junit测试，使用classpath和file 加载文件的区别

    用junit测试发现一个问题,怎么加载配置文件?一直都出现这样的错误 ERROR: org.springframework.test.context.TestContextManager - Caug ...

  2. python中协程

    在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...

  3. 安装CentOS、Linux系统时,GPT分区不能引导的解决方法

    安装系统:CentOS 5.9_64bit时,分区后, 提示如下错误. 解决方法: 1.按ctrl+alt+F2 进入命令行 2.先查看分区 sh #fdisk -l    以下假设分区是/dev/s ...

  4. MVC4做网站后台:模块管理1、修改模块信息

    网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管 ...

  5. 关于skip_name_resolve参数的总结

    作为MySQL调优的一部分,很多人都推荐开启skip_name_resolve.这个参数是禁止域名解析的(当然,也包括主机名).很多童鞋会好奇,这背后的原理是什么,什么情况下开启这个参数比较合适. 基 ...

  6. IDDD 实现领域驱动设计－由贫血导致的失忆症

    啰嗦几句 年前的时候,在和 netfocus 兄,以及对 DDD 感兴趣园友的探讨过程中,我发现自己有很多不足的地方,对 DDD 的了解也只是皮毛而已,代码写的少,DDD 的基本概念也不是很清楚,空有 ...

  7. ZOJ Problem Set - 1383 Binary Numbers

    水题,输出的时候注意下 #include <stdio.h> #include <math.h> int main() { int d; scanf("%d" ...

  8. 1Z0-053 争议题目解析419

    1Z0-053 争议题目解析419 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 419.In Oracle 11g, by default which one of the fo ...

  9. java多线程--几个多线程面试题小结

    自学了一段时间的多线程知识,尝试了做了几个编程题,发现想象中很简单的功能,自己真写起来要花费远超自己想象的功夫,知识点易学,不易用啊. 面试题1:编写程序实现,子线程循环10次,接着主线程循环20次, ...

  10. Cesium应用篇：3控件（1）Clock

    创建 跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用. 在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中 ...