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

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

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

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

<!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(10, 10); obCanvas.lineTo(290, 140); obCanvas.stroke(); } </script> </head> <body onLoad="line()"> <canvas id="line"></canvas> </body> </html>

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

Примечание

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

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

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

ExpangeCanvas

Проще создать функцию для рисования, а еще лучше объект, который сможет установить фон, нарисовать линию, круг, прямоугольник и т.д.

// ------------------ // Объект для рисования в канвасе // 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 == null) return 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 == null) return false; this.obCanvas.fillStyle = bgcolor; this.obCanvas.fillRect(0, 0, this.obCanvas.canvas.width, this.obCanvas.canvas.height); } }

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

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

<!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', 400, 200); draw.SetBgColor('#CCC'); draw.Line(10, 190, 390, 10, 10, '#600'); // Тонкая белая линия на черном фоне var draw2 = new ExpangeCanvas('line2', 400, 200); draw2.SetBgColor('#000'); draw2.Line(10, 10, 390, 190, 2, 'white'); // Горизонтальная красная линия на светло-желтом фоне var draw3 = new ExpangeCanvas('line3', 400, 200); draw3.SetBgColor('#FFE'); draw3.Line(10, 100, 390, 100, 3, 'red'); // Вертикальная зеленая линия на светло-зеленом фоне var draw4 = new ExpangeCanvas('line4', 400, 200); draw4.SetBgColor('#EFE'); draw4.Line(200, 10, 200, 190, 5, '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) Вертикальная зеленая линия в Канвасе

Категории

Веб-дизайнHTML5Canvas

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

Комментарии