Bringen Sie Ihnen bei, wie Sie mit HTML5 eine gierige Wassermelone zeichnen-H5-Tutorial-php.cn

Bringen Sie Ihnen bei, wie Sie mit HTML5 eine gierige Wassermelone zeichnen

藏色散人

Freigeben： 2021-08-11 14:46:29

Original

2236 Leute haben es durchsucht

Was können wir an einem heißen Sommertag ohne eine kalte Wassermelone tun? Wenn wir die Funktionen eines bestimmten Programms beherrschen, wollen wir immer seltsame Effekte erzielen, haha, also werden wir heute, wie der Titel schon sagt, HTML5 verwenden, um eine halbkreisförmige Wassermelone zu realisieren (ohne Kerne, hehe).

Ich weiß nicht, wie viel Sie über HTML5 wissen. Vielleicht können Sie lokal einen Code schreiben, der den Halbbogen-Wassermelonenstil realisieren kann. Eine kleine Erinnerung: Die typische Farbabstimmung von Wassermelone ist Rot und Grün ist das, was ich gegeben habe Eine Implementierungsmethode, Sie können den Code direkt kopieren und lokal testen:

Der Code ist wie folgt:

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function()
        {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");
            drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
            function drawArc(xPos, yPos, radius, startAngle, endAngle,
                             anticlockwise, lineColor, fillColor)
            {
                var startAngle = startAngle * (Math.PI/180);
                var endAngle = endAngle * (Math.PI/180);
                var radius = radius;

                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
                context.fill();
                context.stroke();
            }
        }
    </script>
</head>
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "210" height = "130"
            style = "border:2px solid black">
        你的浏览器目前不支持HTML5 Canvas。
    </canvas>
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Bringen Sie Ihnen bei, wie Sie mit HTML5 eine gierige Wassermelone zeichnen Vergiss es ~ Ist es eine gierige Wassermelone, hahaha? ~

Das Wichtigste, was Sie hier brauchen, ist Ein Wissenspunkt, den Sie beherrschen müssen, ist das HTML5-Canvas-Element

HTML5-Canvas-Element wird zum Zeichnen von Grafiken, Animationen, dynamischen Bildern, Diagrammen und Texten verwendet, um die Benutzererfahrung zu verbessern.

Einführung in Canvas: Das Canvas-Element von HTML5 verwendet JavaScript, um Bilder auf Webseiten zu zeichnen. Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können. Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Wir können die arc()-Methode verwenden, um Bögen auf der Leinwand zu zeichnen.

arc()-Syntaxarc()方法在画布上绘制弧线。

arc()

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Nach dem Login kopieren

Hier sind x und y die Koordinaten des Mittelpunkts des Kreises, radius ist der Radius des Kreises und die Parameter startAngle und endAngle sind der Anfang und das Ende Punkte des Bogens, im Bogenmaß von der x-Achse als Einheit. Der Parameter gegen den Uhrzeigersinn ist ein boolescher Wert, wenn der Bogen tatsächlich gegen den Uhrzeigersinn gezeichnet wird, andernfalls im Uhrzeigersinn.

Verwandte Empfehlungen: „
HTML-Video-Tutorial“ „Javascript-Grundlagen-Tutorial“

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie mit HTML5 eine gierige Wassermelone zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!