Линия в канвасе рисуется при помощи функций .moveTo(x, y), .lineTo(x, y) и .stroke(). Так же можно указать толщину линии изменив параметр lineWidth, цвет линии — strokeStyle.
<!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>
Результат
В результате на экране вы увидите следующие изображения:
