Erstellen gleichseitiges Dreieck in der Mitte der Leinwand?

Ich will zeichnen Sie ein gleichseitiges Dreieck in der Mitte des canvas-Bereichs. Ich versuchte dies:

ctx.moveTo(canvas.width/2, canvas.height/2-50);
ctx.lineTo(canvas.width/2-50, canvas.height/2+50);
ctx.lineTo(canvas.width/2+50, canvas.height/2+50);
ctx.fill();

Aber das Dreieck sieht ein bisschen zu groß.

Wie kann ich zeichnen Sie ein gleichseitiges Dreieck in der Mitte der Leinwand?

Jemand sagte mir, dass Sie haben, um das Verhältnis der Höhe eines gleichseitigen Dreiecks auf die Seite eines gleichseitigen Dreiecks.

h:s

Was sind die beiden zahlen?

InformationsquelleAutor user824294 | 2012-01-20

  1. 6

    Haben Sie es zu tun mit der Höhe des Dreiecks

    var h = side * (Math.sqrt(3)/2);

    oder

    var h = side * Math.cos(Math.PI/6);


    So ist das Verhältnis h:s ist gleich:

    sqrt( 3 ) / 2 : 1 = cos( π / 6 ) : 1 ≈ 0.866025


    Siehe : http://jsfiddle.net/rWSKh/2/

    So ist das Verhältnis h : s = Math.sqrt( 3 ) / 2 : 1?
    ya oder Math.cos(Math.PI/6) oder einfach 0.866
    Wenn ich drehen Sie das Dreieck, es ist nicht mehr zentriert um das ursprüngliche Zentrum. Wie kann ich dieses Problem beheben?
    Könnte mir jemand erklären, warum dies notwendig ist, und warum zum Beispiel in der Frage nicht funktioniert?

    InformationsquelleAutor Diode

  2. 7

    Die Gleichung für die drei Eckpunkte ist

    x = r*cos(angle) + x_center
y = r*sin(angle) + y_center

    wo für Winkel = 0, (1./3)*(2*pi), und (2./3)*(2*pi); und wobei r ist der radius des Kreises, in dem das Dreieck eingeschrieben ist.

    So elegant. Wunderbar!
    Ich habe diese awesome Methode, um Pfeile auf Leinwand - stackoverflow.com/a/36805543/1828637 - vielen Dank dafür!

    InformationsquelleAutor tom10

  3. 4

    Einer einfachen version, wo X und Y sind die Punkte, die Sie wollen Spitze des Dreiecks werden:

    var height = 100 * (Math.sqrt(3)/2);
context.beginPath();
context.moveTo(X, Y);
context.lineTo(X+50, Y+height);
context.lineTo(X-50, Y+height);
context.lineTo(X, Y);
context.fill();
context.closePath();

    Dies ist ein gleichseitiges triange mit allen Seiten = 100. Ersetzen 100 mit, wie lange Sie möchten Ihre Seite Längen auf.

    Nachdem Sie den Mittelpunkt der Leinwand, wenn Sie wollen, dass Ihre Dreiecks-Mittelpunkt sowie können Sie einstellen, X = Mittelpunkt X und Y = Mittelpunkt Y - 50 (für 100 Länge Dreieck).

    InformationsquelleAutor Instinct

  4. 0

    Die Seitenlängen nicht gleich gegeben, diese Koordinaten.

    Die horizontale Linie gebaut, auf der Unterseite hat eine Länge von 100, aber die anderen Seiten sind eigentlich die hypotenuse eines 50x100 Dreieck ( ca. 112).

    InformationsquelleAutor Jeffrey Sweeney

  5. 0

    Kann ich loslegen mit der Zeichnung eines gleichseitigen Dreiecks, aber ich habe nicht die Zeit, um es zentriert.

    jsFiddle

    var ax=0;
var ay=0;
var bx=0;
var by=150;

var dx=bx-ax
var dy=by-ay;
var dangle = Math.atan2(dy, dx) - Math.PI / 3;
var sideDist = Math.sqrt(dx * dx + dy * dy);

var cx = Math.cos(dangle) * sideDist + ax;
var cy =  Math.sin(dangle) * sideDist + ay;

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

ctx.beginPath();  
ctx.moveTo(ax,ay);  
ctx.lineTo(bx,by);  
ctx.lineTo(cx,cy);  

ctx.fill();

    InformationsquelleAutor j08691

  6. 0

    mein code für das zeichnen Dreieck auch je nach Richtung (für die Linien). code ist für Raphael lib.

    drawTriangle(x2 - x1, y2 - y1, x2, y2);
function drawTriangle(dx, dy, midX, midY) {
        var diff = 0;
        var cos = 0.866; 
        var sin = 0.500; 

        var length = Math.sqrt(dx * dx + dy * dy) * 0.8; 
        dx = 8 * (dx / length); 
        dy = 8 * (dy / length); 
        var pX1 = (midX + diff) - (dx * cos + dy * -sin); 
        var pY1 = midY - (dx * sin + dy * cos); 
        var pX2 = (midX + diff) - (dx * cos + dy * sin); 
        var pY2 = midY - (dx * -sin + dy * cos); 

        return [
                    "M", midX + diff, midY,
                    "L", pX1, pY1,
                    "L", pX2, pY2,
                    "L", midX + diff, midY
                ].join(","); 
    }

    InformationsquelleAutor sirjay

Schreibe einen Kommentar