<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>IFS（分形迭代系统）</title>
<script type="text/javascript" src="ifsObject.js"></script>
<script type="text/javascript">
var _width = 0;
var _height = 0;
var _depth = 0;
var _mode = 0;
var _canvas = null;
var _context = null;
var _ifs = null;
var _timer = null;
window.onload = function () {
_width = 800;
_height = 600;
_depth = 32;
_canvas = document.getElementById("canvas");
if (_canvas != null && _canvas.getContext != null) {
_canvas.width = _width;
_canvas.height = _height;
_context = _canvas.getContext("2d");
if (_context != null) {
_context.fillRect(0, 0, _width, _height);
}
}
};
var bEnable = true;
function MyDrawIfs() {
if (bEnable) {
bEnable = false;
if (_context != null) {
_context.fillRect(0, 0, _width, _height);
var imageData = _context.getImageData(0, 0, _width, _height);
_ifs.DrawIfs(imageData.data, _width);
_context.putImageData(imageData, 0, 0);
}
bEnable = true;
}
}
function btnStart_Click() {
if (_timer == null) {
if (_context != null) {
var mode = parseInt(document.getElementById('mode').value);
if (mode != _mode && _context != null) {
if (_ifs != null) {
_ifs.ReleaseIfs();
_ifs = null;
}
_mode = mode;
_ifs = new IfsObject();
_ifs.InitIfs(_depth, _width, _height, _mode);
}
var framerate = parseInt(document.getElementById('framerate').value);
_timer = setInterval(MyDrawIfs, 1000 / framerate);
document.getElementById('btnStart').value = 'Pause';
}
}
else {
clearInterval(_timer);
document.getElementById('btnStart').value = 'Start';
_timer = null;
}
}
</script>
</head>
<body>
<form id="form1">
<table border="1" cellpadding="0" cellspacing="0" style="width: 800px; height: 600px; margin: auto;">
<tr style="width: 100%;">
<td style="width: 50%;">
IFS（分形迭代系统）
</td>
<td style="width: 50%;">
<input id='btnStart' name="btnStart" type="button" value='Start' onclick="btnStart_Click()" />
</td>
</tr>
<tr>
<td style="width: 50%;">
Mode
</td>
<td style="width: 50%;">
<select id="mode" style="width: 200px;">
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td style="width: 50%;">
Frame Rate（桢/秒）
</td>
<td style="width: 50%;">
<select id="framerate" style="width: 200px;">
<option value="40">40</option>
<option value="50">50</option>
<option value="60" selected="selected">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="120">120</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<canvas id="canvas">
<span style="background-color:Aqua;">你的浏览器不支持Html5，请用Chrome、Opera、Firefox、Safari或IE9</span>
</canvas>
</td>
</tr>
</table>
</form>
</body>
</html>
分形迭代系统(IFS)
5星 · 超过95%的资源 需积分: 10 2 浏览量
2011-03-04
23:59:27
上传
评论
收藏 4KB ZIP 举报 
IfsWeb.zip （2个子文件） 
IfsWeb 
ifs.htm 5KB ifsObject.js 17KB资源评论
少年老夫子2014-04-26老师，您的微博，是新浪的？我是分形的初学者，很想用Javascript实现，希望能得到你的帮助。。- j2155134342015-06-27确实不错 .对初学者有很大帮助
