Einfaches Zeichnen von HTML5-Canvas-Zeichnungslinien

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag dasselbe wie andere Tags Holen Sie sich ein CanvasRenderingContext2D-Objekt. Wir können das Objekt zum Zeichnen über ein JavaScript-Skript steuern.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b ist nur ein Container zum Zeichnen von Grafiken. Zusätzlich zu Attributen wie ID, Klasse, Stil usw. verfügt er auch über Höhe und Breite Attribute. Es gibt drei Hauptschritte zum Zeichnen auf dem 5ba626b379994d53f7acf72a64f9b697>-Element:

1. Rufen Sie das DOM-Objekt ab, das einem Canvas-Objekt entspricht die getContext-Methode (des Canvas-Objekts), um ein CanvasRenderingContext2D-Objekt abzurufen.
3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.


Linienattribute
Zusätzlich zum oben verwendeten lineWidth-Attribut haben Linien auch die folgenden Attribute:


•lineCap Die Eigenschaft legt den Stil des Linienendes am Ende der Linie fest oder gibt ihn zurück. Sie kann die folgenden Werte annehmen: „butt“ fügt an jedem Ende der Linie eine gerade Kante hinzu (Standard); " Fügt an jedem Ende der Leitung eine gerade Kante hinzu. Fügt an den Enden runde Drahtkappen hinzu;
„Quadrat" fügt an jedem Ende der Leitung quadratische Drahtkappen hinzu.


•lineJoin
legt den Typ der Ecke fest, die entsteht, wenn sich zwei Linien schneiden. Sie kann die folgenden Werte annehmen: „mitre“ erzeugt eine scharfe Ecke (Standard) „bevel“ erzeugt eine Abschrägung;
„round“ erzeugt eine abgerundete Ecke.


•miterLimit
-Eigenschaft legt die maximale Gehrungslänge fest oder gibt sie zurück (Standard ist 10). Die Gehrungslänge bezieht sich auf den Abstand zwischen den Innen- und Außenecken, an denen sich zwei Linien treffen. miterLimit ist nur gültig, wenn das lineJoin-Attribut „mitre“ ist. JavaScript-Code kopiert Inhalte in die Zwischenablage

var canvas = document.getElementById("canvas");   

        var context = canvas.getContext("2d");   

        //测试lineCap属性   

        //设置基准线便于观察   

        context.moveTo(10,10);   

        context.lineTo(10,200);   

        context.moveTo(200,10);   

        context.lineTo(200,200);   

        context.lineWidth="1";   

        context.stroke();   

        //butt   

        context.beginPath();   

        context.moveTo(10,50);   

        context.lineTo(200,50);   

        context.lineCap="butt";   

        context.lineWidth="10";   

        context.stroke();   

        //round   

        context.beginPath();   

        context.moveTo(10,100);   

        context.lineTo(200,100);   

        context.lineCap="round";   

        context.lineWidth="10";   

        context.stroke();   

        //square   

        context.beginPath();   

        context.moveTo(10,150);   

        context.lineTo(200,150);   

        context.lineCap="square";   

        context.lineWidth="10";   

        context.stroke();   

      

        //测试linJoin属性   

        //miter   

        context.beginPath();   

        context.moveTo(300,50);   

        context.lineTo(450,100);   

        context.lineTo(300,150);   

        context.lineJoin="miter";   

        context.lineWidth="10";   

        context.stroke();   

        //round   

        context.beginPath();   

        context.moveTo(400,50);   

        context.lineTo(550,100);   

        context.lineTo(400,150);   

        context.lineJoin="round";   

        context.lineWidth="10";   

        context.stroke();   

        //square   

        context.beginPath();   

        context.moveTo(500,50);   

        context.lineTo(650,100);   

        context.lineTo(500,150);   

        context.lineJoin="bevel";   

        context.lineWidth="10";   

        context.stroke();   

      

        //测试miterLimit属性   

        context.beginPath();   

        context.moveTo(700,50);   

        context.lineTo(850,100);   

        context.lineTo(700,150);   

        context.lineJoin="miter";   

        context.miterLimit="2";   

        context.lineWidth="10";   

        context.strokeStyle="#2913EC";   

        context.stroke();

Die Auswirkungen unterschiedlicher Werte für jedes Attribut sind wie folgt:





Das Obige ist der Inhalt des Zeichnens von Linien in der HTML5-Leinwand-Grundzeichnung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php .cn)!