Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2012, 23:51
Аспирант
Отправить личное сообщение для frant32 Посмотреть профиль Найти все сообщения от frant32
 
Регистрация: 03.02.2012
Сообщений: 67

рисование параболы
вот решил нарисовать параболу на 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

Последний раз редактировалось frant32, 10.06.2012 в 23:55.
Ответить с цитированием
  #2 (permalink)  
Старый 11.06.2012, 00:04
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Так уже никто не рисует
гуглите canvas
Ответить с цитированием
  #3 (permalink)  
Старый 11.06.2012, 14:58
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Сообщение от Gvozd Посмотреть сообщение
Так уже никто не рисует
гуглите 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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.06.2012, 23:31
Аспирант
Отправить личное сообщение для frant32 Посмотреть профиль Найти все сообщения от frant32
 
Регистрация: 03.02.2012
Сообщений: 67

Dim@,
класс, вот это я и хотел сделать ))))
но я еще вчера понял ,ь что еще нужно читать и читать литертуру)
спасибо , ваш пример тщательно разберу )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
рисование на изображении ev09 (X)HTML/CSS 5 17.06.2011 12:33
Рисование и js Drakonee Элементы интерфейса 6 22.06.2010 23:51
рисование в окне, или след от обьекта zmaxon Общие вопросы Javascript 1 12.02.2010 11:10
Рисование автофигур с помошью JavaScript Artem.A.Yakovenko Общие вопросы Javascript 5 20.06.2008 15:41