Рисование круга на канве

Продолжаю свой рассказ об основах работы с канвой в html5. В предыдущих статьях цикла мы поговорили о рисовании путей и простых фигур — прямоугольника и треугольника. Сегодня речь пойдет об окружностях и кругах. Это не так просто, как могло бы Вам показаться, но и не сложно.

В canvas нет простого способа в одну строку нарисовать круг. Нарисовать круг можно воспользовавшись инструментами для рисования дуг. Круг — довольно сложная фигура, а воспользовавшись этим способом, Вы сможете нарисовать самые разные фигуры, родственные кругу.

Ближе к делу.

cxt.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();

Этот код нарисует черный круг в верхнем левом углу полотна.

Метод arc принимает 6 аргументов:

  • х-координата центра круга;
  • у-координата центра;
  • радиус;
  • угол начала дуги;
  • угол конца дуги;
  • направление рисования дуги (true — против часовой стрелки, false — по часовой)

Чтобы проще было понять как пользоваться методом, изучите следующий рисунок:

Рисование дуги. Canvas HTML5

Рисование дуги. Canvas HTML5

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

Запись опубликована в рубрике HTML & CSS с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">