We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

В процессе перевода.

Метод CanvasRenderingContext2D.stroke() Canvas 2D API управляет текущим или заданным путем с текущим стилем хода, используя правило ненулевой обмотки.

Syntax

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

Parameters

path
A Path2D путь к обводке.

Examples

Using the stroke method

Это всего лишь простой фрагмент кода, который использует метод 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);

Specifications

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.stroke' в этой спецификации.
Живой стандарт  

Browser compatibility

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка Да12 Да Да Да Да
Path parameter Да Да31 Нет Да Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да Да Да Да Да
Path parameter ? ? Да31 ? ? ?

See also

Метки документа и участники

Внесли вклад в эту страницу: slychai85
Обновлялась последний раз: slychai85,