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

Вход на сайт

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

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

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

Пример, к которому вы оставили комментарий строит именно то самое изображение на языке с#, которое вам необходимо. Отличается только цветовая палитра.
Добрый день! Уже и не знаю куда обратиться. Нужно построить фрактал Жулиа на языке программирования C#. Что бы получилось данное изображение
Необходимо дополнение, как все это запустить, Где писать все эти команды, чтобы видеть результат. Я имею ввиду, что необходимо продемонстрировать полный код HTML-страницы со скриптом и тегами холста. Может даже сделать Урок 0 "Как начать рисовать в...
КРУГОВОЙ ФРАКТАЛ -ОШИБОЧНАЯ ПРОГРАММА! ПАПА ЗибЕрт
Можешь обяснить подробно что как работает, и почему массу не задаем

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

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

Для того, чтобы начать «рисовать» при помощи HTML5 Canvas и JavaScript, стоит подготовить все необходимые условия. Их мы и разберем.
Подбираем любой удобный Вам редактор, будь то блокнот, Notepad++ и т.д., создаем файл с расширением «*.html».
Для большего понимания советую ознакомиться с языком HTML в целом (http://htmlbook.ru/).

Начнем.
В HTML5 определен элемент <canvas>как «растровый холст, который может быть использован для отображения диаграмм, игровой графики и т.д. Холст - это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете. У тега есть всего два атрибута — height и width.
Пример для разбора:

<!doctype html>
<html>
	<head>
		<title>canvasExample</title>
      		<meta charset='utf-8' />
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script>
			canvas = document.getElementById('canvas');
			c = canvas.getContext('2d');
		</script>
		<script>
			c.moveTo(20,90);
			c.lineTo(90,90);
			c.stroke();
		</script>
	</body>
</html>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.

Это, скажем так, скелет документа html:

<html>
	<head>
	</head>
	<body>
	</body>
</html>

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Атрибуты:
charset- Указывает кодировку документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега , которая задавала кодировку в предыдущих версиях HTML и XHTML.
<meta charset="кодировка">
content-Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv-Предназначен для конвертирования метатега в заголовок HTTP.
name-Имя метатега, также косвенно устанавливает его предназначение.

У вас может быть несколько элементов <canvas> на одной странице. Каждый холст будет отображаться в DOM и сохранять свое собственное состояние. Если вы добавите каждому холсту атрибут id, то можете получить к ним доступ, как и к любому другому элементу.
<canvas id="a" width="300" height="225"></canvas>
Теперь легко можно обнаружить элемент <canvas> в DOM.
var a_canvas = document.getElementById("a");
Однако у нас пока что используется лишь один холст, так что название не будет отличаться от самого тега.
<canvas id="canvas" width="500" height="500"></canvas>
&
canvas = document.getElementById('canvas');
Каждый холст имеет контекст рисования. Как только вы нашли элемент в DOM (с помощью document.getElementById() или любым другим способом), вызываете метод getContext(). Необходимо указать строку "2D" в методе getContext(), что реализует нашу двумерную графику.
Советую иметь файл с двумя отдельными частями под тегом <script>, чтобы отделить работу с холстом от непосредственно рисунка.
Последняя часть кода, что мы не рассмотрели:

<script>
c.moveTo(20,90);
c.lineTo(90,90);в
c.stroke();
</script>

Это JavaScript, речь о котором пойдет в следующем уроке.