HTML Referenzhandbuch

HTML-Tag-Übersicht

HTML canvas strokeRect() Methode

strokeRect() ist eine Canvas 2Das D API zeichnet in der canvas ein Rechteck mit dem aktuellen Zeichnungsstil, wobei die Ecken (x, y), Breite w und Höhe h angegeben werden. Diese Methode zeichnet direkt auf die Leinwand und ändert den aktuellen Pfad nicht, daher hat jede nachfolgende fill() oder stroke() -Aufruf keinen Einfluss darauf.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen 100*100-Pixel-Vierseitigkeitsfigur:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas strokeRect() - Methode (Grund教程网 oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3">
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

Test See ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9,Firefox,Opera,Chrome and Safari support strokeRect() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The strokeRect() method draws a rectangle (without filling). The default stroke color is black.

Hint:Use strokeStyle Properties to set the stroke color, gradient, or pattern.

JavaScript Syntax:	context.strokeRect(x,y,width,height);

Parameter Value

Parameter	Description
x	The x coordinate of the top-left corner of the rectangle.
y	The y coordinate of the top-left corner of the rectangle.
width	The width of the rectangle, in pixels.
height	The height of the rectangle, in pixels.

HTML canvas Reference Manual

HTML: <template> Tag