CanvasRenderingContext2D.stroke()

Метод CanvasRenderingContext2D.stroke() Canvas 2D API обводит текущий или данный контур цветом strokeStyle.

Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.

Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.

Синтаксис

void ctx.stroke();
void ctx.stroke(path);

Параметры

path
Path2D - контур, который нужно обвести.

Примеры

Использование метода stroke()

В этом примере с помощью метода rect() создается прямоугольник, и затем с помощью stroke() отрисовывается на холсте.

HTML

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

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();

Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.stroke' в этой спецификации.
Живой стандарт  

Поддержка браузеров

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
strokeChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Path parameterChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 31IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 31Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

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