Code-Implementierung zum Zeichnen von Bögen mithilfe von HTML5-Canvas-H5-Tutorial-php.cn

Code-Implementierung zum Zeichnen von Bögen mithilfe von HTML5-Canvas

不言

Freigeben： 2018-08-06 17:59:53

Original

2924 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Code-Implementierung von HTML5-Canvas zum Zeichnen von Bögen. Ich hoffe, dass er für Freunde hilfreich ist.

1. Zeichnen Sie den Graphen, der dem Bogen

context.arc(
    centerx, centery, radius,//圆点坐标和半径
    startingAngle,endingAngle,//起始弧度，结束弧度
    anticlockwise = false//默认顺时针
)

Nach dem Login kopieren

Startwinkel und Endwinkel

entspricht, z. B.:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas画弧形</title>
</head>

<body>
    <canvas id="canvas">浏览器不支持canvas，请更换浏览器</canvas>
    <script type="text/javascript">
        window.onload = function() {
            var canvas = document.getElementById(&#39;canvas&#39;);
            canvas.width = 1024;
            canvas.height = 768;
            var context = canvas.getContext(&#39;2d&#39;);
            // 绘制状态
            context.arc(300, 300, 200, 0, 1.5 * Math.PI);
            context.lineWidth = 5;
            context.strokeStyle = &#39;blue&#39;;
            context.stroke();
        }
    </script>
</body>

</html>

Nach dem Login kopieren

Betriebsergebnisse:

2.beginPath() und closePath() müssen nicht paarweise erscheinen.

beginPath() stellt die Neuplanung eines Pfades dar;

closePath() stellt das Beenden des aktuellen Pfades dar. Wenn Sie dies tun, wird der aktuelle Pfad automatisch geschlossen Wenn Sie es nicht schließen möchten, ist die Verwendung von beginPath() in Ordnung, es ist nicht erforderlich, closePath() zu verwenden.

closePath() hat keine Auswirkung auf fill(). Denn fill() schließt auch automatisch den aktuellen Pfad und füllt ihn dann.

Empfohlene verwandte Artikel:

So implementieren Sie eine Echtzeitüberwachung der aktuellen Wiedergabezeit in HTML5-Video (Code)

Canvas , Drag-and-Drop-Ereignisse in H5 und Audio- und Videocodebeispiele

Das obige ist der detaillierte Inhalt vonCode-Implementierung zum Zeichnen von Bögen mithilfe von HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!