suchen

Heim >Web-Frontend >H5-Tutorial >Zwei Methodencodes für das Canvas-Zeichnungsrechteck und das SVG-Zeichnungsrechteck

Zwei Methodencodes für das Canvas-Zeichnungsrechteck und das SVG-Zeichnungsrechteck

不言
不言Original
2018-08-08 11:28:252033Durchsuche

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(&#39;2d&#39;);//获得笔刷
   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!

css transform canvas
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die Konvertierung eines JPG-Bildes in eine SVG-Textpfadanimation (mit Code)Nächster Artikel：Beispiel für die Konvertierung eines JPG-Bildes in eine SVG-Textpfadanimation (mit Code)

In Verbindung stehende Artikel

Mehr sehen