Ich muss wissen, wie man Polygone auf einer Leinwand zeichnet. Ohne jQuery oder ähnliches zu verwenden.
Wie zeichnet man Polygone auf einer HTML5-Leinwand?
CyanPrime
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
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
undcos
Anrufe und VeränderungenYcenter +
zuYcenter -
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
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 Codeitem
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
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
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
.
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