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

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

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

这两个数字是什么？

来源

2012-01-20 user824294

您有三角形的高度做

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/

来源

2012-01-20 06:18:38 Diode

那么比例'h：s = Math.sqrt（3）/ 2：1'？ – user824294

ya或'Math.cos（Math.PI/6）'或简单地0.866 – Diode

当我旋转这个三角形时，它不再以原始中心为中心。我该如何解决？ – TastyLemons

给定这些坐标的边长不会相等。

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

来源

2012-01-20 02:15:45

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

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

来源

2012-01-20 04:22:16 j08691

的三个角点的方程式为

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

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

来源

2012-01-20 05:58:20 tom10

那么优雅。精彩！ – AlexKempton

我用这个真棒方法在画布上创建箭头 - http://stackoverflow.com/a/36805543/1828637 - 感谢它！ – Noitidart

的简化版本，其中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();

这使得一个等边triange与各方= 100替换为100你需要多长时间？当你找到画布中点后，如果你想让它成为你三角形的中点，你可以设置X =中点的X和Y =中点的Y - 50（对于100长度的三角形）。

来源

2013-07-20 20:33:32 Instinct

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

来源

2015-09-19 09:38:39 sirjay

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

回答

相关问题