Wie zeichnet man Polygone auf einer HTML5-Leinwand?

Lesezeit: 6 Minuten

Wie zeichnet man Polygone auf einer HTML5 Leinwand
CyanPrime

Ich muss wissen, wie man Polygone auf einer Leinwand zeichnet. Ohne jQuery oder ähnliches zu verwenden.

  • Es ist gut, sich daran zu erinnern, dass alles, was ohne eine Drittanbieterbibliothek möglich ist, normalerweise auch so gemacht werden sollte.

    – Rodrigo

    5. März ’16 um 18:21

Wie zeichnet man Polygone auf einer HTML5 Leinwand
phihag

Erstellen Sie einen Pfad mit moveTo und lineTo (Live-Demo):

var ctx = canvas.getContext('2d');
ctx.fillStyle="#f00";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

  • @Gio Borje: AFAIK, jsFiddle kümmert sich nicht um Canvas, das ist Ihr Browser. jsFiddle gibt Ihnen einfach Ihr HTML/CSS/JS zurück.

    – mu ist zu kurz

    30. Januar ’11 um 1:26

  • Ausgezeichnete Lösung. Sehr übersichtlicher Code. danke @phihag. Etwas, das ich verstehen kann!

    – bytise

    15. November ’16 um 3:11

  • kannst du c2 durch ctx ersetzen? Ich denke, es wird häufiger für Canvas-Kontext verwendet. tolle antwort übrigens

    – gididaf

    21. Januar ’18 um 8:00

  • @user1893354 Vielen Dank für den Hinweis. Tatsächlich scheint es dort ein Problem mit jsfiddle zu geben – die Fehlermeldung hat nichts mit der Leinwand zu tun. Ersetzt durch eine sehr einfache Live-Demo-Site.

    – phihag

    13. Februar ’18 um 19:41

1641813579 896 Wie zeichnet man Polygone auf einer HTML5 Leinwand
Andrew Staroscik

von http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas:

Der folgende Code zeichnet ein Sechseck. Ändern Sie die Anzahl der Seiten, um verschiedene regelmäßige Polygone zu erstellen.

var ctx = document.getElementById('hexagon').getContext('2d');

// hexagon
var numberOfSides = 6,
    size = 20,
    Xcenter = 25,
    Ycenter = 25;

ctx.beginPath();
ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          

for (var i = 1; i <= numberOfSides;i += 1) {
  ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}

ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.stroke();
#hexagon { border: thin dashed red; }
<canvas id="hexagon"></canvas>

  • Das war großartig, sehr elegant, auch, wenn Sie hinzufügen: cxt.save(); cxt.fillStyle = "#FF000"; cxt.fill(); cxt.restore(); Sie können die Form füllen.

    – Samuelkobe

    7. Dezember ’14 um 23:49


  • das ist großartig – ich habe damit herumgesessen, kann aber nicht herausfinden, wie ich das ausgewählte Polygon zum Rotieren bringen würde – irgendwelche Ideen?

    – eskimomatte

    6. Januar ’15 um 10:44

  • Es gibt einige Möglichkeiten, das zu bekommen, was Sie wollen. Eine Möglichkeit besteht darin, die eingebaute Methode cxt.rotate() zu verwenden [along with cxt.save() and cxt.restore()] um Teile der Leinwand zu drehen. Alternativ funktioniert auch das Hinzufügen eines konsistenten Wertes zu den cos- und sin-Funktionen. Sehen Sie sich diese jsfiddle für eine Demonstration an: jsfiddle.net/kwyhn3ba

    – Andrew Staroscik

    7. Januar ’15 um 16:02

  • vielen Dank dafür – ich bin auf die gleiche Lösung gestoßen, nachdem ich die Logik des von Ihnen bereitgestellten Links für die wissenschaftliche Einführung gelesen hatte. var angle = i * 2 * Math.PI / shape.currentSides + rotation zu den cos- und sin-Werten hinzugefügt hat bei mir funktioniert … danke nochmal

    – eskimomatte

    8. Januar ’15 um 9:57


  • Wenn (wie in meinem Fall) der Startpunkt nur die Mitte oben des Polygons und nicht die Mitte rechts sein soll, drehen Sie die sin und cos Anrufe und Veränderungen Ycenter + zu Ycenter - an beiden Stellen (wenn man es als Summe und nicht als Differenz der Werte belässt, beginnt es mit einem Punkt am unteren Rand der resultierenden Form). Ich bin kein schlauer Mann, wenn es um Trigger geht, also nimm es mit Vorsicht; aber das hat zumindest das erreicht, was ich wollte.

    – Joseph Marikle

    22. Okt ’15 um 22:13


1641813579 348 Wie zeichnet man Polygone auf einer HTML5 Leinwand
Leinwandtag

//poly [x,y, x,y, x,y.....];
var poly=[ 5,5, 100,50, 50,100, 10,90 ];
var canvas=document.getElementById("canvas")
var ctx = canvas.getContext('2d');
ctx.fillStyle="#f00";

ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item] , poly[item+1] )}

ctx.closePath();
ctx.fill();

  • Deshalb wünschte ich, ich könnte die JavaScript-Vanille grundsätzlich verstehen for Methode. Diese eine Codezeile hat die Dinge so sehr vereinfacht. Normalerweise verwende ich die jQuery .each() aber seine Anwendung ist viel weniger vielseitig.

    – Alexander Dixon

    21. März ’16 um 15:22

  • @AlexanderDixon Das obige Javascript ist wirklich kein gutes Beispiel. Alle Variablen brauchen var, im obigen Code item ist eine Verschmutzung des globalen Namensraums. Alles befindet sich in einer Zeile, was die Lesbarkeit verringert. Wenn Ihnen die Lesbarkeit nicht wichtig ist, können Sie auch die geschweiften Klammern entfernen.

    – AnnanFay

    8. Februar ’18 um 14:55


  • @canvastag Schöner dynamischer Job. Diese Antwort ist für mich besser als akzeptierte Antwort. Ich verstehe “Query .each()” nicht … dies ist eine magische Funktion, die Speicher beansprucht. Auch für den globalen Namensraum 😉 lustig, das ist nur ein Beispiel, mach es wie eine Klasse, wenn du das willst.

    – Nikola Lukas

    14. März ’18 um 13:31

//create and fill polygon
CanvasRenderingContext2D.prototype.fillPolygon = function (pointsArray, fillColor,     strokeColor) {
    if (pointsArray.length <= 0) return;
    this.moveTo(pointsArray[0][0], pointsArray[0][1]);
    for (var i = 0; i < pointsArray.length; i++) {
        this.lineTo(pointsArray[i][0], pointsArray[i][1]);
    }
    if (strokeColor != null && strokeColor != undefined)
        this.strokeStyle = strokeColor;

    if (fillColor != null && fillColor != undefined) {
        this.fillStyle = fillColor;
        this.fill();
    }
}
//And you can use this method as 
var polygonPoints = [[10,100],[20,75],[50,100],[100,100],[10,100]];
context.fillPolygon(polygonPoints, '#F00','#000');

Hier ist eine Funktion, die sogar das Zeichnen im Uhrzeigersinn / gegen den Uhrzeigersinn unterstützt, bei der Sie Füllungen mit der Nicht-Null-Wicklungsregel steuern.

Hier ist ein vollständiger Artikel über die Funktionsweise und mehr.

// Defines a path for any regular polygon with the specified number of sides and radius, 
// centered on the provide x and y coordinates.
// optional parameters: startAngle and anticlockwise

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) {
  if (sides < 3) return;
  var a = (Math.PI * 2)/sides;
  a = anticlockwise?-a:a;
  ctx.save();
  ctx.translate(x,y);
  ctx.rotate(startAngle);
  ctx.moveTo(radius,0);
  for (var i = 1; i < sides; i++) {
    ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
  }
  ctx.closePath();
  ctx.restore();
}

// Example using the function.
// Define a path in the shape of a pentagon and then fill and stroke it.
context.beginPath();
polygon(context,125,125,100,5,-Math.PI/2);
context.fillStyle="rgba(227,11,93,0.75)";
context.fill();
context.stroke();

  • Dieser Artikel ist ziemlich lang, um zu sagen “Sie zeichnen einen Kreis mit weniger Kanten”. Vielleicht möchten Sie die Ergebnisse zwischenspeichern, um zu vermeiden, dass cos und sin so oft aufgerufen werden (verzeihen Sie mir, wenn es dies bereits tut, ich bin kein JavaScript-Programmierer).

    – QuantumKarl

    21. Dezember ’15 um 12:28

1641813579 744 Wie zeichnet man Polygone auf einer HTML5 Leinwand
Koen.

Verwenden Sie zusätzlich zu @canvastag a while Schleife mit shift Ich finde es prägnanter:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var poly = [5, 5, 100, 50, 50, 100, 10, 90];

// copy array
var shape = poly.slice(0);

ctx.fillStyle="#f00"
ctx.beginPath();
ctx.moveTo(shape.shift(), shape.shift());
while(shape.length) {
  ctx.lineTo(shape.shift(), shape.shift());
}
ctx.closePath();
ctx.fill();

  • Dieser Artikel ist ziemlich lang, um zu sagen “Sie zeichnen einen Kreis mit weniger Kanten”. Vielleicht möchten Sie die Ergebnisse zwischenspeichern, um zu vermeiden, dass cos und sin so oft aufgerufen werden (verzeihen Sie mir, wenn es dies bereits tut, ich bin kein JavaScript-Programmierer).

    – QuantumKarl

    21. Dezember ’15 um 12:28

1641813579 66 Wie zeichnet man Polygone auf einer HTML5 Leinwand
ankur

Sie können die Methode lineTo() genauso verwenden wie: var objctx = canvas.getContext(‘2d’);

        objctx.beginPath();
        objctx.moveTo(75, 50);
        objctx.lineTo(175, 50);
        objctx.lineTo(200, 75);
        objctx.lineTo(175, 100);
        objctx.lineTo(75, 100);
        objctx.lineTo(50, 75);
        objctx.closePath();
        objctx.fillStyle = "rgb(200,0,0)";
        objctx.fill();

Wenn Sie das Polygon nicht füllen möchten, verwenden Sie die Stroke()-Methode anstelle von fill()

Sie können auch Folgendes überprüfen: http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

Danke

.

297420cookie-checkWie zeichnet man Polygone auf einer HTML5-Leinwand?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy