seo-doka.ru

**Gulia** » 05 июл 2012, 07:17

Начинаю постигать премудрости HTML 5, сейчас разбираюсь с холстом (canvas). Как я поняла, это очень обширная тема, я начала с рисования графических примитивов. Все примеры в интернете, которые я смогла найти касаются рисования только прямоугольников, с книгами тоже самое. Мне интересно, какие ещё графические примитивы можно нарисовать стандартными функциями HTML 5? Можно ли например нарисовать окружность или треугольник? Была бы благодарна, если б привели пример или указали источник, где об этом можно прочитать.

**Oleg** » 09 июл 2012, 06:53

Можно ещё рисовать дуги (окружности) и пути. Для рисования путей используется функция, если не изменяет память MoveTo(начальная координата, конечная координата), а для рисования дуг используется функция Arc (<горизонтальная координата>,<вертикальная координата>, <радиус>, <начальный кут>, <конечный кут>,true | false). По просьбе трудящихся привожу пример рисования окружности:
<!DOCTYPE html>
<title>ARG</title>
<canvas id="canv" width="640" height="480"></canvas>
<script type="text/javascript">
window.onload = function ()
{
var canv = document.getElementById('canv');
g = canv.getContext('2d');

g.beginPath();
g.arc(200, 150, 100, 0, Math.PI * 2, false);
g.stroke();
g.closePath();

}
</script>

**Gulia** » 10 июл 2012, 06:31

Большое спасибо за ответ, но есть ещё несколько вопросов:
1. Я, например хочу нарисовать две параллельные линии, делаю следующее:
ctxCanvas.moveTo (20, 20);
ctxCanvas.lineTo (400, 400);
У меня рисует одну линию, с координатами, как я поняла, начальная точка – (20, 20), конечная – (400, 400). И, если Вы указали правильный синтаксис функции moveTo, то какая координата берется х или у, ведь полотно – двумерное пространство?
2. Что значит последний параметр в функции Arc, который принимает булево значения?

**Oleg** » 10 июл 2012, 11:07

Отвечаю на вопросы:
1. Я прошу прощения. moveTo, действительно, переносит перо от текущей точки в точку с координатами х, у, которые передаются, как параметры функции moveTo. Таким образом если Вы хотите нарисовать две параллельные прямые вам необходимо поместить сначала перо в одну точку с помощью функции moveTo, потом функцией нарисовать линию lineTo и повторить. Например:
ctxCanvas.moveTo (20, 20);
ctxCanvas.lineTo (400, 20);
ctxCanvas.moveTo (20,50);
ctxCanvas.lineTo (400, 50);

2. True – рисует дуга за часовой стрелкой, false -против

**Gulia** » 11 июл 2012, 06:20

Спасибо большое, но когда я сделала, как говорили Вы, у меня вообще ничего не рисует. Привожу полный листинг кода своей страницы:
<!DOCTYPE html>
<title>ARG</title>
<canvas id="canv" width="640" height="480"></canvas>
<script type="text/javascript">
window.onload = function ()
{
var canv = document.getElementById('canv');
ctxCanvas = canv.getContext('2d');
ctxCanvas.beginPath();
ctxCanvas.moveTo (20, 20);
ctxCanvas.lineTo (400, 20);
ctxCanvas.moveTo (20,50);
ctxCanvas.lineTo (400, 50);
}
</script>

**Oleg** » 12 июл 2012, 07:52

Ну, что ж попробуем разобраться, что не так. Давайте поэтапно посмотрим, что Вы делаете. Как только прогрузилось окно, вызывается функция function (), в которой Вы и осуществляете рисования на холсте, здесь Вы указываете браузеру как рисовать, но не указываете, как нужно зарисовать. Для этого предусмотрена функция контекста рисования, а именно, stroke(), то есть после всех необходимых вызовов функций moveTo и lineTo (именно в Вашем случаи), допишите следующую строку: ctxCanvas.stroke ();
Так должно работать.

**Gulia** » 16 июл 2012, 07:57

Спасибо большое, Oleg. Действительно, всё работает и рисует. Я помню, когда разбиралась с рисованиям прямоугольников, то читала о том, что прямоугольник на холсте не нарисуется если не применить метод Fill () или Stroke (). Теперь я понимаю, что линии это тоже графические примитивы и тоже относиться и к ним. Большое спасибо за ответ. Но, меня интересует ещё один вопрос: почему рисования работает, как с методом closePath(), так и без него? Извините, если уже надоела со своими бесконечными вопросами.

**Oleg** » 17 июл 2012, 11:27

Я, конечно, не эксперт в этой области, но попробую ответить на Ваш вопрос. Метод closePath() замыкает контур рисования и указывает на то, что последняя точка должна соединиться с первой точкой контура, а начало контура мы определили с помощью метода beginPath(). Но, метод closePath() не есть обязательным, потому и рисуются линии без этого метода. Перо после применения метода closePath() устанавливается в первую точку рисования холста. Ну, кажется всё по этому методу. Обращайтесь, если что, чем смогу, помогу.

**Gulia** » 16 авг 2012, 08:21

Спасибо, за все Ваши ответы, Oleg. Косвенно знаю, что можно заставлять двигаться эти графические примитивы, то есть создавать анимации. Вот и вопрос, чтоб сделать, простенькую анимацию прямоугольника, который, например, будет двигаться от одного угла экрана к другому, нужны какие-то специальные инструменты типа Sencha Animator, или это можно сделать и с помощью простого блокнота. Если да, то как именно это можно осуществить на практике? Буду благодарна за приведения конкретного работающего примера.

**Oleg** » 20 авг 2012, 07:09

Создавать простые анимации с помощью HTML 5 можно и в блокноте, если Вы хорошо владеете и HTML, и JavaScript. Тоже можно сказать и про сайты, а все специальные программы призваны просто облегчить труд программиста. Все анимации базируются на смене своих координат за определённый промежуток времени. В HTML 5 сменить положения на координатной сетки можно такими методами: translate – переместить, rotate – повернуть, scale - масштабировать. Использую эти методы можно добиться создания иллюзии движения.

seo-doka.ru

Графические примитивы в HTML 5

Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Re: Графические примитивы в HTML 5

Кто сейчас на форуме