Question

我想在画布中间画一个等边三角形。我试过这个：

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

这两个数字是什么？

Answer 1

三个角点的等式是

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

其中，对于角度= 0，（1./3）*（2 * pi），和（2./3)*(2*pi）;其中r是刻有三角形的圆的半径。

Answer 2

你必须用三角形的高度来做

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/

Answer 3

一个简单版本，其中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长度的三角形）。

Answer 4

给定坐标，边长不会相等。

底部构造的水平线长度为100，但其他边实际上是50x100三角形的斜边（约112）。

Answer 5

我可以让你开始绘制一个等边三角形，但我没有时间让它居中。

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

Answer 6

我的绘制三角形的代码也取决于方向（对于线条）。代码适用于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(","); 
    }

在画布中间创建等边三角形？

6 个答案: