Draw имеет прямую линию с Canvas

Draw имеет линию, выбрать цвет, толщину, функцию в деталях с несколькими примерами.

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

Чтобы продемонстрировать эту функцию, мы начинаем с объявления тега <canvas>, как поясняется в первой статье этой серии, «Начать с canvas». 

<canvas id="moncanevas" width="400" height="150">
  Canvas requiert un navigateur moderne: Chrome, Firefox, Edge, Opera, Safari.
</canvas>

Определяется строка с двумя инструкциями: moveTo и lineTo

Линия разбивается на две функции (например, на язык BASIC): moveTo (x, y) определяет координаты X и Y текущей точки, которая служит начальной точкой для построения линии .
И lineTo (x, y) задает конечную точку, чтобы проложить прямой путь между текущей точкой, и новой точкой, координатами которой являются параметры X и Y .
Строка фактически не прокладывается до вызова функции stroke ().
Когда ты хочешь нарисовать новую строку, которая не является продолжением предыдущего контура, ты начинаешь с функции beginPath ().
Поэтому для рисования строки требуется как минимум четыре инструкции. Пример :

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function drawLine()
{
 context.beginPath();
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas требует современного браузера: Chrome, Firefox, IE9, Safari .

Цвет задается атрибутом strokeStyle

Выбор цвета контура осуществляется не с помощью параметра, а в целом для всех контуров, которые следуют за ним. Значение атрибута strokeStyle будет цветом всех новых контуров до тех пор, пока он не будет назначен заново.
Но это не относится к содержанию полных фигур, таких как, например, прямоугольник, их цвет зависит от другого атрибута fillStyle.

Значения цвета, назначенные этим атрибутам, те же, что и для CSS-кода, например: blue, # 008, # 000080, rgba (0,0,128,1 ).

context.strokeStyle='green'; 
context.fillStyle='rgba (0,0,128,1)';

Таким образом, ранее определенная функция drawLine дополняется атрибутом цвета:

function drawLine()
{
 context.beginPath();
 context.strokeStyle='green';
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}

Важно: Чтобы задать другим цветам контуры линий, перед построением новой строки необходимо добавить функцию beginPath (). Даже отдельные сегменты считаются частью одной строки до нового экземпляра функции beginPath .

Canvas требует современного браузера: Chrome, Firefox, IE9, Safari .

Для определения цвета возможны четыре формата...

И назначить их strokeStyle или fillStyle (наряду с текстурами, что мы увидим ниже). Эти значения помещаются в кавычки и могут быть именем цвета, либо его шестнадцатеричным кодом в виде красного/зеленого/синего, либо десятичным кодом на три или четыре значения с уровнем непрозрачности. 

ctx.fillStyle = "white";
ctx.fillStyle = "#FFFFFF";
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillStyle = "rgba(128,128,128,0.5)";

Четвёртый атрибут rgba (a = alpha) определяет непрозрачность, которая колеблется от 0.0 до 1, где 0 - полная прозрачность и 1 - общая непрозрачность, что всегда происходит для простого формата rgb. Поэтому средняя прозрачность определяется 0.5.

Атрибут lineWidth определяет толщину линии

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

function drawLine()
{
 context.strokeStyle='green';
 context.lineWidth=4; 
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas требует современного браузера: Chrome, Firefox, IE9, Safari .

Концы линии могут быть круглыми или квадратными

Когда она имеет более двух пикселей толщиной, можно придать концам линии круглую или квадратную форму. Ему нельзя придать форму стрелки (не больше, чем в SVG), что было бы полезно для графов.
Для изменения фигуры присваивается атрибут lineCap со значением round (round), square (квадрат) или butt (без конца), которое является значением по умолчанию.
В случае, если линия не имеет конца, ее длина не увеличивается на длину концов, которая равна ширины линии, определенной lineWidth.

Пример: context.lineCap = «round»;

В демо мы попробуем три значения подряд: butt в зеленом, square в голубом, затем round в красном.

Canvas требует современного браузера: Chrome, Firefox, IE9, Safari .

Видно, что кончики линии увеличивают её длину пропорционально её ширины.

Полный исходный код:

function drawLine4()
{
  var context = document.getElementById("canvas4").getContext('2d');
  context.lineWidth='8';
  context.strokeStyle='green';
  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(200,20);
  context.stroke();
  context.beginPath();
  context.strokeStyle='#800';
  context.lineCap='square';
  context.moveTo(20,50);
  context.lineTo(200,50);
  context.stroke();
  context.strokeStyle='rgb(128,0,0)';
  context.lineCap='round';
  context.beginPath();
  context.moveTo(20,80);
  context.lineTo(200,80);
  context.stroke();
}

drawLine4();
Следующий шаг - рисование кривой.

Пример приложения