рисование параболы
вот решил нарисовать параболу на javascript и неуспев начать столкнулся с проблемой.
<style>
#holst{width=300px; height:300px; border:solid 1px #000;'}
#pixel{width=1px; height:1px; background:#000}
</style>
/*есть div он же холст на котором будем рисовать параболу*/
<div id='holst'></div>
<script type='text/javascript'>
var holst=document.getElementById('holst');
point=createElement('div'); /*создал точку параболы бес координат , просто точку*/
point.id='pixel';
</script>
а вот теперь как создать массив таких точек только с разными координатами (штук 10 точек) которые расчитываются по формуле y=2x; и нарисовать их по коррдинатам которые сами будут расчитыватся по формуле, тоисть point[1] left 1px bottom 1px point[2] left 2px bottom 4px point[3] left 3px bottom 6px |
Так уже никто не рисует
гуглите canvas |
Цитата:
frant32, но можно и так (кстати ваша формула y=2x - это не парабола, а диагональ):) , вот что произойдет с вашим примером:
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
.pixel{
position:absolute;
width:2px;
height:4px;
background-color:#960F0F;
}
</style>
</head>
<body onload='load()'>
<script>
function load(){
var holst = document.getElementById('holst');
var i = new Number(prompt('Введите начальное значение x','-10'));
var num = new Number(prompt('Введите конечное значение x','10'));
var point = new Array();
var pix = new Object();
while(i <= num){
point[i] = document.createElement('div');
pix.x = i;
pix.y = pix.x * 2
pix.y += '';
point[i].setAttribute('class','pixel');
pix.x += 400;
point[i].setAttribute('style','left:'+pix.x+'px;bottom:'+pix.y+'px');
holst.appendChild(point[i]);
i++;
}
}
</script>
<div id='holst'></div>
</body>
</html>
А вот пример с реальной параболой :) :
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
.pixel{
position:absolute;
width:2px;
height:4px;
background-color:#960F0F;
}
</style>
</head>
<body onload='load()'>
<script>
function load(){
var holst = document.getElementById('holst');
var i = new Number(prompt('Введите начальное значение x','-10'));
var num = Math.sqrt(Math.pow(i,2));
var type = new Number(prompt('Введите степень в которую будет возведено \n x (от этого зависит тип параболы)','2'));//тип параболы
var point = new Array();
var pix = new Object();
while(i <= num){
point[i] = document.createElement('div');
pix.x = i;
pix.y = Math.pow(pix.x,type);
pix.y += '';
if (pix.y == 'NaN') pix.y = 0;
point[i].setAttribute('class','pixel');
pix.x += 400;//нужно что-бы были видны обе части параболы
point[i].setAttribute('style','left:'+pix.x+'px;bottom:'+pix.y+'px');
holst.appendChild(point[i]);
i++;
}
}
</script>
<div id='holst'></div>
</body>
</html>
:) :) |
Dim@,
класс, вот это я и хотел сделать )))) но я еще вчера понял ,ь что еще нужно читать и читать литертуру) спасибо , ваш пример тщательно разберу ) |
| Часовой пояс GMT +3, время: 10:54. |