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);