Как нарисовать круг в HTML5 (Canvas)

Круг в канвасе рисуется при помощи функции .arc(centerX, centerY, radius, sAngle, eAngle, clockwise), .fill() и .stroke(). При помощи параметров .fillStyle, .lineWidth и .strokeStyle меняются цвет заливки, толщина и цвет линии.

Красная линия

Нарисуем в канвасе красный круг. Смотреть пример онлайн.

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Как нарисовать круг в HTML5 (Canvas)</title> <script> function circle() { var canvas = document.getElementById('circle'); var obCanvas = canvas.getContext('2d'); obCanvas.beginPath(); obCanvas.arc(150, 75, 50, 0, 2*Math.PI, false); obCanvas.fillStyle = 'red'; obCanvas.fill(); obCanvas.lineWidth = 1; obCanvas.strokeStyle = 'red'; obCanvas.stroke(); } </script> </head> <body onLoad="circle()"> <canvas id="circle"></canvas> </body> </html>

В результате на экране вы красный круг (похоже на флаг Японии).
Простой красный круг

Примечание

Канвас генерирует PNG-изображения и после выполнения функции .getContext('2d') изображение Канваса имеет прозрачный фон.

Объект для рисования в Канвасе

Продолжая тему объекта для рисования в Канвасе, дополним его функцией для рисования круга (файл ExpangeCanvas.js — файл будет постепенно улучшаться).

Пример использования

Нужно нарисовать 4 круга при помощи ExpangeCanvas в отдельных канвасах. Смотреть пример онлайн.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Как нарисовать круг в HTML5 (Canvas)</title> <script src="/js/ExpangeCanvas.js"></script> <script> function ExampleCanvasCircle() { // circle1 var draw = new ExpangeCanvas('circle1', 400, 400); draw.SetBgColor('#CCC'); draw.Circle(200, 200, 100, 10, 'red', 'yellow'); // circle2 var draw2 = new ExpangeCanvas('circle2', 400, 400); draw2.SetBgColor('#000'); draw2.Circle(200, 200, 180, 5, 'white', '#666'); // circle3 var draw3 = new ExpangeCanvas('circle3', 400, 400); draw3.SetBgColor('#FFE'); draw3.Circle(200, 200, 150, 1, 'green', 'green'); // circle4 var draw4 = new ExpangeCanvas('circle4', 400, 400); draw4.SetBgColor('#EFE'); draw4.Circle(200, 200, 70, 10, '#990099', '#CC0'); } </script> </head> <body onLoad="ExampleCanvasCircle()"> <canvas id="circle1"></canvas> <canvas id="circle2"></canvas> <canvas id="circle3"></canvas> <canvas id="circle4"></canvas> </body> </html>

Результат

В результате вы увидите 4 изображения с нарисованными в них кругами:

Желтый круг (Canvas)

Серый круг (Canvas)

Зеленый круг (Canvas)

Золотой круг (Canvas)

Категории

Веб-дизайнHTML5Canvas

Читайте также

Комментарии