Javascript свойство strokeStyle

Свойство strokeStyle устанавливает/возвращает цвет, градиент или шаблон, используемый для обводки фигуры.

Значение по умолчанию: #000000
JavaScript синтаксис: context.strokeStyle=цвет | градиент | шаблон;

Возможные значения

Значение Описание
цвет CSS значение цвета обводки графической фигуры. Значение по умолчанию #000000
градиент Объект градиента (линейного или радиального) для обводки графической фигуры
шаблон Объект шаблона для обводки графической фигуры

Пример №1

Нарисуем прямоугольник. Для его прорисовки используем красный цвет:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);

Пример №2

Нарисуем прямоугольник. Для его прорисовки используем градиент:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Заполняем градиентом
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);