Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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(150755002*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 в отдельных канвасах. Смотреть пример онлайн.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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'400400);
    draw.SetBgColor('#CCC');
    draw.Circle(20020010010'red''yellow');
    
    // circle2
    var draw2 = new ExpangeCanvas('circle2'400400);
    draw2.SetBgColor('#000');
    draw2.Circle(2002001805'white''#666');
    
    // circle3
    var draw3 = new ExpangeCanvas('circle3'400400);
    draw3.SetBgColor('#FFE');
    draw3.Circle(2002001501'green''green');
    
    // circle4
    var draw4 = new ExpangeCanvas('circle4'400400);
    draw4.SetBgColor('#EFE');
    draw4.Circle(2002007010'#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)

Опубликовано: 24 апреля 2012  ·  Автор: Артём Фёдоров  ·  19777 просмотров

Полезные статьи по теме

Категория

ГлавнаяВеб-дизайнHTML5CanvasКак нарисовать круг в HTML5 (Canvas)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Canvas, HTML5, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания