Создать равносторонний треугольник в середине холста? - PullRequest
Новая
       20

Создать равносторонний треугольник в середине холста?

3 голосов
/ 20 января 2012

Я хочу нарисовать равносторонний треугольник в середине холста. Я попробовал это: 

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();

Но треугольник выглядит слишком высоким.

Как нарисовать равносторонний треугольник в середине холста?

Кто-то сказал мне, что вы должны найти отношение высоты равностороннего треугольника к стороне равностороннего треугольника. 

h:s

Какие два числа?

Ответы [ 6 ]

8 голосов
/ 20 января 2012

Уравнение для трех угловых точек: 

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

, где для угла = 0, (1./3)*(2*pi) и (2./3)*(2*число Пи);и где r - радиус круга, в который вписан треугольник.

7 голосов
/ 20 января 2012

Вы должны сделать это с высотой треугольника

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

или 

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

Так что соотношение h:s равно: 

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

Смотри: http://jsfiddle.net/rWSKh/2/

5 голосов
/ 21 июля 2013

Простая версия, где X и Y - это точки, которые вы хотите, чтобы вершина треугольника была: 

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();

Это делает равносторонний треугольник со всеми сторонами = 100. Замените 100 на то, как долго вы хотите, чтобы длина вашей стороны была.

После того как вы найдете среднюю точку холста, если вы хотите, чтобы она также была средней точкой вашего треугольника, вы можете установить X = среднюю точку X и Y = среднюю точку Y - 50 (для треугольника длиной 100).

0 голосов
/ 19 сентября 2015

мой код для рисования треугольника также в зависимости от направления (для линий). код для Рафаэля Либа. 

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(","); 
    }
0 голосов
/ 20 января 2012

Я могу начать с рисования равностороннего треугольника, но у меня нет времени, чтобы выровнять его по центру.

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();
0 голосов
/ 20 января 2012

Длины сторон не будут равны с учетом этих координат.

Горизонтальная линия, построенная снизу, имеет длину 100, но другие стороны фактически являются гипотенузой треугольника 50х100 (приблизительно 112).

...