CanvasRenderingContext2D.strokeRect()

Метод CanvasRenderingContext2D.strokeRect(), предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами (x, y), а так же ширину w и высоту h, используя текущий стиль линий.

Синтаксис

void ctx.strokeRect(x, y, width, height);

Параметры

x

Координата начальной точки прямоугольника по оси x.

y

Координата начальной точки прямоугольника по оси y.

width

Ширина прямоугольника.

height

Высота прямоугольника.

Примеры

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

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

HTML

html

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

JavaScript

js

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

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

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

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

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

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

BCD tables only load in the browser

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