Zwei Methodencodes für das Canvas-Zeichnungsrechteck und das SVG-Zeichnungsrechteck-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-08-08 11:28:25

Original

2055 Leute haben es durchsucht

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>

Nach dem Login kopieren

2.svg zeichnet ein Rechteck

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"></rect>    
        </svg>

Nach dem Login kopieren

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!