Der Inhalt dieses Artikels befasst sich mit den Codes für zwei Methoden zum Zeichnen von Rechtecken auf Leinwand und zum Zeichnen von Rechtecken auf SVG. Ich hoffe, dass er für Sie hilfreich ist.
1.Canvas zeichnet ein Rechteck
<!doctype html>
<html>
<head>
<!--canvas画矩形-->
<style>
#huaban{
border:1px solid;
}
</style>
<script>
</script>
<meta charset="UTF-8">
</head>
<body>
<canvas width="200" height="200" id="huaban">
</canvas>
<script>
var can=document.getElementById("huaban");//获得画板数据
var con=can.getContext('2d');//获得笔刷
con.fillStyle="red";//设置填充颜色
con.strokeStyle="blue";//设置线条颜色
con.fillRect(10,10,100,100);//填充画矩形
con.strokeRect(100,100,200,200);//线条画矩形
</script>
</body>
</html>2.svg zeichnet ein Rechteck
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"></rect>
</svg>rect stellt ein Rechteck dar;
Die Breiten- und Höhenattribute des Rechteckelements können Definieren Sie ein Rechteck. Die Höhe und Breite des Attributs „Stroke-Opacity“ definiert die Transparenz der Rahmenfarbe (der zulässige Bereich ist: 0 - 1). Das Attribut „Opacity“ von CSS definiert die Deckkraft des gesamten Elements (); der zulässige Bereich ist: 0 - 1);
Um in SVG zu drehen, können Sie transform='rotate(45) verwenden
Empfohlene verwandte Artikel:
Beispiel für die Konvertierung eines JPG-Bildes in eine SVG-Textpfadanimation (mit Code) SVG-Zeichenfunktion: SVG realisiert das Zeichnen einer Blume (mit Code)Das obige ist der detaillierte Inhalt vonZwei Methodencodes für das Canvas-Zeichnungsrechteck und das SVG-Zeichnungsrechteck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So laden Sie Videos von Douyin herunter
Xiaomi-Methode zur Computerdatenwiederherstellung
Was sind die regulären Ausdrücke in PHP?
Die Rolle des Formatfactory-Tools
Datenbankverwaltungssystem
Wie tippe ich die Inschrift auf dem Münzkreis ein?
Was ist mit dem roten Licht am Lichtsignal los?
Wie kaufe und verkaufe ich Bitcoin? Tutorial zum Bitcoin-Handel
