Heim > Web-Frontend > H5-Tutorial > Hauptteil

Wie zeichnet man in H5 einen fünfzackigen Stern?

php中世界最好的语言
Freigeben: 2018-01-09 09:22:43
Original
3850 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie man mit H5 einen fünfzackigen Stern zeichnet. Was sind die Vorsichtsmaßnahmen zum Zeichnen eines fünfzackigen Sterns in H5? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. Tatsächlich ist dieses Tag dasselbe wie andere Tags. Das Besondere ist, dass dieses Tag einen CanvasRenderingContext2D erhalten kann 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 und Stil verfügt es auch über Höhen- und Breitenattribute. Es gibt drei Hauptschritte zum Zeichnen auf dem >: 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.

Durch die Analyse des fünfzackigen Sterns können wir die Regeln für die Koordinaten jedes Scheitelpunkts bestimmen. Dabei ist zu beachten: Auf der Leinwand ist die Richtung der Y-Achse nach unten gerichtet.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标,根据顶点制定路径   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();
Nach dem Login kopieren

Verwandte Lektüre:

Wie man reguläre Ausdrücke verwendet

um IP-Adressen und Domänennamen abzugleichen

Was für reguläre Ausdrücke kann Highlight anzeigen


So laden Sie einen Avatar im WeChat-Applet hoch

Das obige ist der detaillierte Inhalt vonWie zeichnet man in H5 einen fünfzackigen Stern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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