Mandelbrot，html变量到javascript
Mandelbrot，html变量到javascript
提问于 2014-10-06 13:12:34
我有问题，我需要配置一个代码。这使得画布上的mandelbrot分形，我需要从html表单中创建一个变量，将其转换为javascript变量，但这是我的问题。我也需要从表格中得到测试数字的最小和最大值。有什么想法吗？请帮帮我！
<body>
<h1>Mandelbrot fraktál</h1>
<form>
c: <input id="cid" type="text" name="firstname">
<input type="submit" value="Submit">
</form>
<!-- A vászon kijelölése, méretezése -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
// === Mandelbrot objektum létrehozása
var mandelbrot = {
// === Osztályváltozók
maxiter : 32, // iterációk száma
////xmin : -2.0, xmax : 1.0, // valós rész
////ymin : -1.5, ymax : 1.5, // képzetes rész
// === Komplex szám eleme-e a Mandelbrot halmaznak?
mandelcolor: function (c,b){
// a: valós rész, b: képzetes rész
var z=[c,b];
var i=0;
// A következő sorozatelem kiszámítása
while(i<this.maxiter && z[0]*z[0]+z[1]*z[1]<=4.0 ){
// Új elem = Z négyzete + kiinduló érték
var aa=z[0]*z[0]-z[1]*z[1]+c;
var bb=2*z[0]*z[1]+b;
z[0]=aa; z[1]=bb;
i++;
}
// Visszatérési érték a pixel színkódja
return '#'+i.toString(16)+i.toString(16)+i.toString(16);
},
// === Mandelbrot fraktál rajzolása soronként
fraktal: function(){
for(var y=0;y<context.canvas.height;y++)
// A vizsgált komplex szám képzetes részének
// leképezése az Y koordináta alapján
var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height;
for(var x=0;x<context.canvas.width;x++){
// A vizsgált komplex szám valós részének leképezése
// az X koordináta alapján
var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width;
context.fillStyle=this.mandelcolor(document.getelementById("cid"),zy);
context.fillRect(x,y,1,1);
}
}
}
}
// === Globális változók deklarálása
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
mandelbrot.fraktal();
</script> 回答 2
Stack Overflow用户
回答已采纳
发布于 2014-10-06 16:54:17
MarkE正确地使用了JS中的事件，但是代码中也有一个错误，希望我在下面讨论。有了分形，你可能会想要设定中心复数，然后从变焦中求出最小和最大。
对于复数有一个输入，但这需要一些字符串解析才能分离出组件，因此我将它们分隔为实部和虚部的输入。(我在那里也放了个变焦。)我不知道你打算如何处理表单提交-在我看来，你可能不想要一个表单，因为你不想每次提交任何东西。
可能有人应该清理这个问题，以获得更完整的答案，我建议使用JQuery而不是getElementByID (区分大小写)。
至少以下代码起作用：
<h1>Mandelbrot fraktál</h1>
<form>c:
<input id="recid" type="text" name="Re(c)" value=-0.5>
<input id="imcid" type="text" name="Im(c)" value=0.0>
<input id="zoom" type="text" name="zoom" value=1.5>
<input type="submit" value="Submit">
</form>
<!-- A vászon kijelölése, méretezése -->
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
// === Mandelbrot objektum létrehozása
var mandelbrot = {
// === Osztályváltozók
///document.getelementById("cid");
maxiter: 32, // iterációk száma
xmin: -2.0,
xmax: 1.0, // valós rész
ymin: -1.5,
ymax: 1.5, // képzetes rész
zoom: 1.5,
// === Komplex szám eleme-e a Mandelbrot halmaznak?
mandelcolor: function (c, b) {
// a: valós rész, b: képzetes rész
var z = [c, b];
var i = 0;
// A következő sorozatelem kiszámítása
while (i < this.maxiter && z[0] * z[0] + z[1] * z[1] <= 4.0) {
// Új elem = Z négyzete + kiinduló érték
var aa = z[0] * z[0] - z[1] * z[1] + c;
var bb = 2 * z[0] * z[1] + b;
z[0] = aa;
z[1] = bb;
i++;
}
// Visszatérési érték a pixel színkódja
return '#' + i.toString(16) + i.toString(16) + i.toString(16);
},
// === Mandelbrot fraktál rajzolása soronként
fraktal: function () {
//console.log(document.getElementById("recid").innerHTML);
this.zoom = parseFloat(document.getElementById("zoom").value);
this.xmin = parseFloat(document.getElementById("recid").value) - this.zoom;
this.ymin = parseFloat(document.getElementById("imcid").value) - this.zoom;
this.xmax = parseFloat(document.getElementById("recid").value) + this.zoom;
this.ymax = parseFloat(document.getElementById("imcid").value) + this.zoom;
for (var y = 0; y < context.canvas.height; y++) {
// A vizsgált komplex szám képzetes részének
// leképezése az Y koordináta alapján
var zy = this.ymin + (this.ymax - this.ymin) * y / context.canvas.height;
for (var x = 0; x < context.canvas.width; x++) {
// A vizsgált komplex szám valós részének leképezése
// az X koordináta alapján
var zx = this.xmin + (this.xmax - this.xmin) * x / context.canvas.width;
context.fillStyle = this.mandelcolor(zx, zy);
context.fillRect(x, y, 1, 1);
}
}
}
};
// === Globális változók deklarálása
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
mandelbrot.fraktal();
</script>Stack Overflow用户
发布于 2014-10-06 16:13:43
给用户2输入type=range元素来选择它们的min & max值。
<input type=range id=minValue min=0 max=100 value=25>
<input type=range id=maxValue min=0 max=100 value=75>然后，每当用户使用.change对其进行更改时，读取它们。
var minValue=document.getElementById("minValue");
var maxValue=document.getElementById("maxValue");
minValue.addEventListener('change',function(){
var value=minValue.value;
...do stuff with the value
});
maxValue.addEventListener('change',function(){
var value=maxValue.value;
...do stuff with the value
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26216988
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号