Canvas - line, рисуем линии


Canvas - line, рисуем линии

В данной статье я напишу как в элементе Canvas рисовать линии. Для того чтобы создать линию мы будем использовать методы moveTo(), lineTo(), и stroke().

Рисование линий (Draw Line)

function drawScene()
{
   var web_canvas = document.getElementById('drawScene');
   var web_context = web_canvas.getContext('2d');
   web_context.beginPath();
   web_context.moveTo(40,80);
   web_context.lineTo(40,200);
   web_context.lineTo(260,200);
   web_context.lineTo(260,80);
   web_context.stroke();
}

В результате мы получим:

Line

Метод MoveTo(X,Y) - переместить текущую позицию в новую точку на холсте с координатами X и Y.

Метод LineTo(X,Y) - перемещает текущую позицию в точку X и Y и рисует линию соединяющую обе точки.

Метод stroke() - отображает линию на холсте с заданным цветом, если цвет не задан то по умолчанию он является черным

.

Цвет линий.

Для того чтобы задать цвет линий нужно использовать метод strokeStyle - контекста.

Зададим цвет нашим линиям:

web_context.strokeStyle = "#949494";
Line

Ширина линий.

Для установки ширины линии используется метод lineWidth() - контекста.

Зададим ширину линии:

web_context.lineWidth = 8;
Line

Для линий можно задать стиль отображения концов линии.

Можно задать стиль - "butt","round" и "square".

Зададим стиль round.

web_context.lineCap = "round";

вот в итоге у нас получиться:

Line

Исходный код примера:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Создаем линию</title>
<style type="text/css">
#drawScene {
border:1px #F00 solid;
margin:30px;
}
</style>
</head>
<body>
<canvas id="drawScene" width="300" height="300" >//создадим квадратный холст
</canvas>
<script>
function drawScene()
{
   var web_canvas = document.getElementById('drawScene');
   var web_context = web_canvas.getContext('2d');
   web_context.beginPath();
   web_context.moveTo(40,80);
   web_context.lineTo(40,200);
   web_context.lineTo(260,200);
   web_context.lineTo(260,80);
   web_context.strokeStyle = "#949494";
   web_context.lineWidth = 8;
   web_context.lineCap = "round";
   web_context.stroke();
}
window.addEventListener("load",drawScene,true);
</script>
</body>
</html>

 

Теги