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


Как нарисовать линию в HTML5 (Canvas)

Линия в канвасе рисуется при помощи функций .moveTo(x, y), .lineTo(x, y) и .stroke(). Так же можно указать толщину линии изменив параметр lineWidth, цвет линии — strokeStyle.

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

Нарисуем в канвасе красную линию толщиной 2 пикселя. Смотреть пример онлайн

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как нарисовать линию в HTML5 (Canvas)</title>
<script>

function line()
{
    var canvas = document.getElementById('line');
    var obCanvas = canvas.getContext('2d');
    
    obCanvas.beginPath();
    obCanvas.lineWidth = 2;
    obCanvas.strokeStyle = 'red';
    obCanvas.moveTo(1010);
    obCanvas.lineTo(290140);
    obCanvas.stroke();
}

</script>
</head>

<body onLoad="line()">

<canvas id="line"></canvas>

</body>
</html>

В результате на экране вы увидите примерно такое изображение.
Нарисовать линию (Canvas)

Примечание

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

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

Как видно из примера, чтобы нарисовать линию нужно вызвать множество методов.

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// ------------------
// Объект для рисования в канвасе
// HTML5.Canvas
// ------------------
function ExpangeCanvas(canvasid, width, height)
{
    // ------------------
    // Переменные ширины и высоты
    // Хотя canvas ставит значения по-умолчанию 300 на 150
    // ------------------
    width = width || 300;
    height = height || 150;
    
    
    // ------------------
    // Находим нужный канвас
    // ------------------
    this.canvas = document.getElementById(canvasid);
    this.obCanvas = null;
    
    if (this.canvas != null)
    {
        // ------------------
        // Устанавливаем размеры канваса
        // ------------------
        this.canvas.width = width;
        this.canvas.height = height;
        
        
        // ------------------
        // Контекст канваса
        // ------------------
        this.obCanvas = this.canvas.getContext('2d');
    }
    
    
    // ------------------
    // Рисуем линию
    // ------------------
    this.Line = function(x1, y1, x2, y2, linewidth, strokestyle)
    {
        if (this.obCanvas == nullreturn false;
        
        this.obCanvas.beginPath();
        this.obCanvas.lineWidth = linewidth;
        this.obCanvas.strokeStyle = strokestyle;
        this.obCanvas.moveTo(x1, y1);
        this.obCanvas.lineTo(x2, y2);
        this.obCanvas.stroke();
    }
    
    
    // ------------------
    // Функция заливает канвас цветом
    // ------------------
    this.SetBgColor = function(bgcolor)
    {
        if (this.obCanvas == nullreturn false;
        
        this.obCanvas.fillStyle = bgcolor;
        this.obCanvas.fillRect(00this.obCanvas.canvas.width, this.obCanvas.canvas.height);
    }
}

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

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

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
44
45
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как нарисовать линию в HTML5 (Canvas)</title>

<script src="ExpangeCanvas.js"></script>
<script>

function ExampleCanvas()
{
    // Толстая красная линия на сером фоне
    var draw = new ExpangeCanvas('line1'400200);
    draw.SetBgColor('#CCC');
    draw.Line(101903901010'#600');
    
    // Тонкая белая линия на черном фоне
    var draw2 = new ExpangeCanvas('line2'400200);
    draw2.SetBgColor('#000');
    draw2.Line(10103901902'white');
    
    // Горизонтальная красная линия на светло-желтом фоне
    var draw3 = new ExpangeCanvas('line3'400200);
    draw3.SetBgColor('#FFE');
    draw3.Line(101003901003'red');
    
    // Вертикальная зеленая линия на светло-зеленом фоне
    var draw4 = new ExpangeCanvas('line4'400200);
    draw4.SetBgColor('#EFE');
    draw4.Line(200102001905'green');
}

</script>

</head>

<body onLoad="ExampleCanvas()">

<canvas id="line1"></canvas>
<canvas id="line2"></canvas>
<canvas id="line3"></canvas>
<canvas id="line4"></canvas>

</body>
</html>

Результат

В результате на экране вы увидите следующие изображения:

Линия на сером фоне (Canvas) Белая линия на черном фоне (Канвас) Красная линия (Canvas) Вертикальная зеленая линия в Канвасе

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

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

Категория

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

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

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

Комментарии

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

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

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

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

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

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