Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

黄舟
Freigeben： 2017-03-14 15:44:16
Original
1962 Leute haben es durchsucht

<canvas> ist ein neues -Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Dieser Artikel richtet sich hauptsächlich an alle Einführung in die grundlegenden Zeichnungsmethoden zum Zeichnen von Liniensegmenten in HTML5 Canvas. Interessierte Freunde können sich auf

beziehen Das hinzugefügte Tag wird tatsächlich zum Zeichnen von Grafiken verwendet. Seine Besonderheit besteht darin, dass dieses Tag ein CanvasRenderingContext2DObjekt erhalten kann, das wir JavaScript verwenden können Skript zur Steuerung des zu zeichnenden Objekts.

ist nur ein Container zum Zeichnen von Grafiken zusätzlich zu ID, Klasse, Stil und anderen AttributenEs gibt auch die Eigenschaften Höhe und Breite. Es gibt drei Hauptschritte zum Zeichnen auf dem >-Element:

1. Holen Sie sich das

DOM-Objekt , das dem -Element entspricht; 2. Rufen Sie die Methode getContext() des Canvas-Objekts auf, um ein CanvasRenderingContext2D-Objekt zu erhalten.
3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Liniensegmente moveTo() und lineTo() zeichnen

Das Folgende ist ein einfaches Zeichenbeispiel: 

XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas绘图演示</title>  
    <style type="text/css">  
        #canvas{   
            border: 1px solid #ADACB0;   
            display: block;   
            margin: 20px auto;   
        }   
    </style>  
</head>  
<body>  
    <canvas id="canvas" width="300" height="300">  
        你的浏览器还不支持canvas   
    </canvas>  
</body>  
<script type="text/javascript">  
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.moveTo(10,10);   
    context.lineTo(200,200);   
    //设置样式   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
</script>  
</html>
Nach dem Login kopieren



Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Wenn nicht übergeben, moveTo() Geben Sie speziell an, dass der Startpunkt von lineTo() auf dem vorherigen Punkt basiert. Wenn Sie den Startpunkt erneut auswählen müssen, müssen Sie daher die Methode moveTo() übergeben. Wenn Sie Stile für verschiedene Liniensegmente festlegen müssen, müssen Sie einen Pfad über context.beginPath() erneut öffnen. Hier ist ein Beispiel: 

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //设置对象起始点和终点   
    context.beginPath();   
    context.moveTo(100,100);   
    context.lineTo(700,100);   
    context.lineTo(700,400);   
    context.lineWidth = 2;   
    context.strokeStyle = "#F5270B";   
    //绘制   
    context.stroke();   
  
    context.beginPath();   
    context.moveTo(100,200);//这里的moveTo换成lineTo效果是一样的   
    context.lineTo(600,200);   
    context.lineTo(600,400);   
    //strokeStyle的颜色有新的值，则覆盖上面设置的值   
    //lineWidth没有新的值，则按上面设置的值显示   
    context.strokeStyle = "#0D25F6";   
    //绘制   
    context.stroke();   
</script>
Nach dem Login kopieren



Detaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5-Canvas-Codebeispiele für grundlegende Zeichenliniensegmente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
canvas html5
Quelle：php.cn
Vorheriger Artikel：Detaillierte Erklärung des Navigations-Tags in HTML5 Nächster Artikel：Stellen Sie kurz die neuen und entfernten Elemente von HTML5 vor
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage