CanvasRenderingContext2D: strokeRect()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die
CanvasRenderingContext2D.strokeRect()
Methode der Canvas 2D API zeichnet ein Rechteck, das gemäß dem aktuellen strokeStyle und anderen
Kontexteinstellungen umrandet wird.
Diese Methode zeichnet direkt auf die Leinwand, ohne den aktuellen Pfad zu verändern. Daher haben nachfolgende Aufrufe von fill() oder
stroke() keinen Einfluss auf dieses Rechteck.
Syntax
strokeRect(x, y, width, height)
Die strokeRect()-Methode zeichnet ein umrandetes Rechteck, dessen Startpunkt
bei (x, y) liegt und dessen Größe durch width und
height angegeben ist.
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Ein einfaches umrandetes Rechteck
Dieses Beispiel zeichnet ein Rechteck mit einer grünen Umrandung mithilfe der strokeRect()-Methode.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die obere linke Ecke des Rechtecks befindet sich bei (20, 10). Es hat eine Breite von 160 und eine Höhe von 100.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);
Ergebnis
Verschiedene Kontexteinstellungen anwenden
Dieses Beispiel zeichnet ein Rechteck mit einem Schattenwurf und dicken, abgeschrägten Umrandungen.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-strokerect-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.strokeStyleCanvasRenderingContext2D.clearRect()CanvasRenderingContext2D.fillRect()