Круги в canvas

"круг canvas" как нарисовать круг в canvas. Примеры кругов в canvas.

Как сделать разные круги в canvas.

1. Простой круг в canvas.
Скачать пример круг в canvas Пример canvas круг (на отдельной странице)

2. Круг в canvas с заливкой цветом.
Скачать пример canvas с заливкой цветом Пример canvas круг (на отдельной странице)

3. Круг в canvas с картинкой внутри.
Скачать пример canvas с картинкой внутри Пример canvas круг (на отдельной странице)

Простой круг в canvas.

Для того, чтобы сделать круга canvas вам понадобится:

Нам нужен html блок для canvas это будет "canvas":

<canvas id="myCanvas" width="400" height="200">Ваш браузер не поддерживает canvas</canvas>

Создаем объект с помощью getElementById, чтобы взаимодействовать с "canvas html".

var canvas = document.getElementById("myCanvas");

В случае, если браузер не поддерживает "canvas" выводим:

Ваш браузер не поддерживает canvas

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или null, если идентификатор контекста не определён.

var ctx= canvas.getContext("2d");

Метод arc() создает дугу/кривую (используется для создания окружностей или их части).

x Координата X центра круга

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

y Координата Y центра круга

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

r Радиус круга

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

sAngle Начальный угол в радианах (0 — позиция на 3 часа)

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

eAngle Конечный угол в радианах

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

counterclockwise false рисуем по часовой, true - против(в данном случае не принципиально...). 2*Math.PI - полный круг:

ctx.arc( 75, 75, 50, 0, 2*Math.PI, false);

Ширина бордюра 1px:

ctx.lineWidth = 1;

Метод stroke() рисует фигуру, контур которой был задан ранее:

ctx.stroke();

Соберем весь код круга в canvas:

Пример : круг в canvas.

Сделаем пример на отдельной странице... и разместим код круга туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :




Круг в canvas с заливкой цветом.

Для того, чтобы создать круг в canvas с заливкой цветом вам потребуется:

Теория и пример из выше приведенного пункта!

Добавляем в код:

fillStyle устанавливает или возвращает цвет... сделаем красным... red.

ctx.fillStyle = 'red';

fill() делает заливку текущей фигуры:

ctx.fill();

Соберем весь код вместе:

Пример : круг в canvas с заливкой.

Сделаем пример на отдельной странице... и разместим код круга с заливкой туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :




Круг в canvas с картинкой внутри.

Для того, чтобы сделать "Круг в canvas с картинкой внутри" вам потребуется...

Немного изменить код который я использовал выше... здесь не сложно понять, что происходит:

var img = new Image();

img.src = 'https://picsum.photos/150';

img.onload = () => {

var pattern = ctx.createPattern(img, 'no-repeat');

ctx.arc(100, 100, 75, 0, Math.PI*2);

ctx.fillStyle = pattern;

Соберем весь код:

Пример : круг в canvas с картинкой внутри.

Сделаем пример на отдельной странице... и разместим код круга с картинкой внутри туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :