Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.
Добавление к программе строки glutReshapeFunc(changeSize); приводит к тому, что треугольник перестаёт совсем отрисовываться.
Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Bonsai.js - это легковесная векторная графическая библиотека с интуитивно понятным API. В данном уроке рассматривается подключение библиотеки и рисование шести базовых геометрических фигур.

Для подключения данной библиотеки можно просто добавить следующую строку в ваш .html файл:

<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>

Однако тогда библиотека будет работать только при наличии интернета, поэтому лучше скачать её. Для этого переходим по данной ссылке и сохраняем открывшийся файл (правая кнопка мыши -> сохранить как, либо Ctrl+S, либо Command+S). После того, как файл загружен, мы можем подключить скрипт как обычно. В моем случае, файл библиотеки лежит в той же директории, что и мой скрипт, поэтому подключение выглядит следующим образом:

<script src="bonsai-0.4.1.min.js"></script>

Для начала, будем писать наш скрипт прямо внутри .html файла. При этом библиотека лежит в той же директории. "Каркас" будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
	<script src="bonsai-0.4.1.min.js"></script>
</head>
<body>
	<div id="movie"></div> 
	<script>
	/*здесь "movie" - идентификатор контейнера, который будет использоваться для рисования */
	  bonsai.run(document.getElementById('movie'), { 
		code: function() {
		//Здесь мы будем пиcать наш код
		},
		width: 600,	//Задаем ширину сцены
		height: 600 //Задаем высоту сцены
	  });
	</script>
</body>
</html>

В bonsai существует 6 основных фигур для рисования: прямоугольник, дуга, окружность, эллипс, многоугольник и звезда. Также библиотека предоставляет универсальный класс Path для создания произвольных путей или кривых задав их координатами каждой точки, командами пути, либо же указанием строки пути согласно спецификации SVG Path. В этом уроке мы рассмотрим только 6 основных фигур.

Создание прямоугольника имеет следующий вид:

var figure1 = new Rect(x, y, width, height, cornerRadius);

где figure1 - произвольное название, x и y - координаты верхнего левого угла прямоугольника, width и height - ширина и высота соответственно, а cornerRadius - коэффициент скругления краёв прямоугольника. Все параметры должны быть целочисленными.
Создадим прямоугольник, покрасим его в красный цвет и отрисуем при помощи соответствующих методов:

var figure1 = new Rect(10, 10, 100, 100);
  	figure1.fill('red'); //заполняем фигуру красным цветом
	figure1.addTo(stage); //отрисовка

Теперь наш html-файл выглядит так:

<!DOCTYPE html>
<html>
<head>
	<script src="bonsai-0.4.1.min.js"></script>
</head>
<body>
	<div id="movie"></div> 
	<script>
	  bonsai.run(document.getElementById('movie'), { 
		code: function() {
		var figure1 = new Rect(10, 10, 100, 100);
  		figure1.fill('red');
		figure1.addTo(stage);
		},
		width: 600,
		height: 600 
	  });
	</script>
</body>
</html>

Если его открыть в браузере, то видим результат:

Создание дуги имеет следующий вид:

var figure2 = new Arc(centerX, centerY, radius, startAngle, endAngle);

где centerX, centerY - координаты центра окружности, radius - радиус окружности, startAngle, endAngle - начальная и конечная точка дуги в радианах.

Добавим к нашему прямоугольнику красный сегмент:

<!DOCTYPE html>
<html>
<head>
	<script src="bonsai-0.4.1.min.js"></script>
</head>
<body>
	<div id="movie"></div> 
	<script>
	  bonsai.run(document.getElementById('movie'), { 
		code: function() {
		var figure1 = new Rect(10, 10, 100, 100);
  			figure1.fill('red');
			figure1.addTo(stage);
		var figure2 = new Arc(110, 110, 50, 0, 2);
  			figure2.fill('red');
			figure2.addTo(stage);
		},
		width: 600,
		height: 600 
	  });
	</script>
</body>
</html>

Для создания круга необходимо указать координаты центра и радиус:

var figure3 = new Circle(centerX, centerY, radius)

Аналогично, для эллипса вместо одного радиуса, надо указать два:

var figure4 = new Ellipse(centerX, centerY, radiusX, radiusY)

Добавим зеленые круг и овал в нашу сцену:

<!DOCTYPE html>
<html>
<head>
	<script src="bonsai-0.4.1.min.js"></script>
</head>
<body>
	<div id="movie"></div> 
	<script>
	  bonsai.run(document.getElementById('movie'), { 
		code: function() {
		var figure1 = new Rect(10, 10, 100, 100);
  			figure1.fill('red');
			figure1.addTo(stage);
		var figure2 = new Arc(110, 110, 50, 0, 2);
  			figure2.fill('red');
			figure2.addTo(stage);
		var figure3 = new Circle(150, 60, 25);
  			figure3.fill('green');
			figure3.addTo(stage);
		var figure4 = new Ellipse(250, 60, 50, 25);
  			figure4.fill('green');
			figure4.addTo(stage);
		},
		width: 600,
		height: 600 
	  });
	</script>
</body>
</html>

Для создания многоугольника указываем координаты центра, радиус окружности, которая его описывает, а также количество ребер(не менее трех):

var figure5 = new Polygon(centerX, centerY, radius, sides)

Создание звезды аналогично:

var figure6 = new Star(centerX, centerY, radius, rays)

Добавим треугольник и звезду синего цвета:

<!DOCTYPE html>
<html>
<head>
	<script src="bonsai-0.4.1.min.js"></script>
</head>
<body>
	<div id="movie"></div> 
	<script>
	  bonsai.run(document.getElementById('movie'), { 
		code: function() {
		var figure1 = new Rect(10, 10, 100, 100);
  		figure1.fill('red');
			figure1.addTo(stage);
		var figure2 = new Arc(110, 110, 50, 0, 2);
  		figure2.fill('red');
			figure2.addTo(stage);
		var figure3 = new Circle(150, 60, 25);
  			figure3.fill('green');
			figure3.addTo(stage);
		var figure4 = new Ellipse(250, 60, 50, 25);
  			figure4.fill('green');
			figure4.addTo(stage);
		var figure5 = new Polygon(80, 220, 70, 3);
			figure5.fill('blue');
			figure5.addTo(stage);
		var figure6 = new Star(210, 200, 70, 5);
			figure6.fill('blue');
			figure6.addTo(stage);
		},
		width: 600,
		height: 600 
	  });
	</script>
</body>
</html>

В итоге мы имеем следующее изображение:

Bonsai предоставляет множество возможностей работы с векторной графикой, однако уже на этом этапе изучения можно создавать несложные изображения из геометрических фигур.