Einfaches Zeichnen von HTML5-Canvas-Zeichnungslinien

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. In diesem Artikel wird hauptsächlich die Methode zum Zeichnen von Linien in HTML5-Canvas vorgestellt >

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag das gleiche wie andere Tags, da es etwas Besonderes ist kann ein CanvasRenderingContext2D-Objekt erhalten und wir können das Objekt zum Zeichnen über JavaScript-Skripte 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). ; „rund“ fügt an jedem Ende der Linie eine runde Kappe hinzu;
„quadratisch“ fügt an jedem Ende der Linie eine quadratische Kappe hinzu.

•lineJoin legt den Typ der Ecke fest, die entsteht, wenn sich zwei Linien treffen. Sie kann die folgenden Werte annehmen: „mitre“ Erstellt scharfe Ecken (Standard); „bevel“ erzeugt abgeschrägte Ecken;
„round“ erzeugt abgerundete Ecken.

•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

Inhalt in die Zwischenablage kopieren

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 verschiedener Werte jedes Attributs sind wie folgt :

Verwandte Empfehlungen:

Verwenden Sie HTML5 Canvas, um Bilder mit Farbe und Textur zu füllen

Javascript HTML5 Canvas implementiert ziehbare Provinzkarte von China

Das obige ist der detaillierte Inhalt vonEinfaches Zeichnen von HTML5-Canvas-Zeichnungslinien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!