Heim > Web-Frontend > H5-Tutorial > Hauptteil

Einfaches Zeichnen von HTML5-Canvas-Zeichnungslinien

黄舟
Freigeben: 2017-02-23 14:04:08
Original
2361 Leute haben es durchsucht

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.

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 >-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();
Nach dem Login kopieren

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



Einfaches Zeichnen von HTML5-Canvas-Zeichnungslinien

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)!

Einfaches Zeichnen von HTML5-Canvas-Zeichnungslinien
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!