CanvasRenderingContext2D.fill()

Перейти к:
  1. Синтаксис
  2. Пример
  3. Характеристики
  4. Совместимость
  5. Смотрите также

CanvasRenderingContext2D.fill() метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.

Синтаксис

void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);

Параметры

fillRule
Выбор алгоритма заливки фигуры
Возможные значения:
path
Path2D путь для заливки.

Пример

Использование метода fill

Это всего лишь простой фрагмент кода, который использует метод fill для заполнения пути.

HTML

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

JavaScript

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

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

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.fill();</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.fill' в этой спецификации.		 Живой стандарт  

Совместимость

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

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

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

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