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

Вход на сайт

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

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

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

Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(

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

Рейтинг@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, речь о котором пойдет в следующем уроке.