From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/linecap/index.html | 132 +++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linecap/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/linecap') diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e4d59a184d --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

Свойство CanvasRenderingContext2D.lineCap предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. 

+ +
+

Примечание: Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

+ +
ctx.lineCap = "butt" || "round" || "square";
+ +

Параметры

+ +
+
butt
+
Концы линий прямые.
+
round
+
Концы линий скругленные.
+
square
+
Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.
+
+ +

Примеры

+ +

Использование свойства lineCap

+ +

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

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+ +

Результат

+ +

{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}

+ +

Разница между значениями lineCap

+ +

В примере нарисованы три линии с разными значениями lineCap. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.

+ +

Левая линия будет использовать значение lineCap "butt". Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap "round". За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение "square". Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+ +

{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}}
+ +

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

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

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

+ + -- cgit v1.2.3-54-g00ecf