Die stroke-Methode

Die Methode stroke wird aufgerufen, um das Zeichnen einer Linie mit lineTo abzuschließen, sowie zum Umranden von Konturen von Formen, die z.B. mit der Methode rect gezeichnet wurden.

Syntax

Kontext.stroke()

Beispiel

Lassen Sie uns eine Linie zeichnen:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Beispiel

Lassen Sie uns ein Quadrat zeichnen:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

Siehe auch

die Methode fill,
die verwendet wird, um eine Form mit Hintergrund zu füllen
die Eigenschaft strokeStyle,
die die Linienfarbe festlegt