CanvasRenderingContext2D.strokeStyle

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Свойство CanvasRenderingContext2D.strokeStyle, предоставляемое Canvas 2D API задаёт цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение #000 (чёрный цвет).

Смотрите также главу Applying styles and color в Canvas Tutorial.

Синтаксис

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;

Значения

color

DOMString строка содержащая цвет в формате, поддерживающимся стандартом CSS (<color>).

gradient

Объект класса CanvasGradient (линейный или круговой градиент ).

pattern

Объект класса CanvasPattern (повторяющееся изображение).

Примеры

Использование strokeStyle с цветом

Ниже представлен простой фрагмент кода, использующий strokeStyle с цветом.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

Использование strokeStyle в циклах for

В этом примере свойство strokeStyle используется для рисования границ фигур. Мы используем метод arc() для рисования кругов.

js
var ctx = document.getElementById("canvas").getContext("2d");
for (var i = 0; i < 6; i++) {
  for (var j = 0; j < 6; j++) {
    ctx.strokeStyle =
      "rgb(0," +
      Math.floor(255 - 42.5 * i) +
      "," +
      Math.floor(255 - 42.5 * j) +
      ")";
    ctx.beginPath();
    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
    ctx.stroke();
  }
}

Результат выглядит так:

Спецификации

Specification
HTML Standard
# dom-context-2d-strokestyle-dev

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также