English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
in HTML5Eine der am einfachsten zu zeichnenden Formen auf dem Canvas ist das Rechteck. Sie können2Die Funktionen fillRect() des D-Kontexts und die Operation strokeRect().
in HTML5Eine der am einfachsten zu zeichnenden Formen auf dem Canvas ist das Rechteck. Sie können2Die Funktionen fillRect() des D-Kontexts und die Operation strokeRect(). Dies ist ein einfaches Beispiel:
<canvas id="ex1" width="500" height="150" style="border: 1px fest #cccccc;">
HTML5 Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Testen Sie es heraus ‹/›Sie können lineWidth2Die Eigenschaftseinstellungen des D-Kontexts werden verwendet, um die Linienbreite des umrandeten Rechtecks zu setzen. Der Vorgang ist wie folgt:
<canvas id="ex4" width="500" height="150" style="border: 1px fest #cccccc;">
HTML5 Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100;
context.lineWidth = 4;
context.strokeRect(x, y, width, height);
</script>Testen Sie es heraus ‹/›Dies ist die Linienbreite4verwenden, um das Aussehen des Rechtecks zu ändern:
Sie können 2Die fillStyle- oder strokeStyle-Eigenschaft des D-Kontexts wird verwendet, um die Farbe der gezeichneten Rechtecke zu setzen. Dies ist ein Beispiel, bei dem diese Einstellungen fett angezeigt werden:
<canvas id="ex5" width="500" height="150" style="border: 1px fest #cccccc;">
HTML5 Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>Testen Sie es heraus ‹/›Dies ist der wiederholte Rechteck, das auf der Leinwand gezeichnet wird: