在画布上绘制一个三角形内切圆

Question

我正在创建一个名为“使用画布在三角形中刻写圆”的项目，但是遇到了很多问题。虽然我已经尝试在画布中央绘制三角形，但我不确定从哪里开始绘制一个能够完美地适用于我的圆。

就数学而言，我知道如何绘制圆，但当涉及到JavaScript时，我陷入了困境。

请帮助我。

谢谢。

以下是我尝试绘制居中三角形的代码：

var c=document.getElementById("myCanvas");
var context =c.getContext("2d");

check(ctx, 100, c.width/2, c.height/2);

function check(ctx, side, cx, cy){

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

    ctx.strokeStyle = "black";
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.moveTo(0,-h/2);
    ctx.lineTo(-side/2, h / 2);  // line a
    ctx.lineTo(side /2, h / 2); // line b
    ctx.lineTo(0,-h /2);            // line c
    ctx.stroke();
    ctx.closePath();
    ctx.save();

}

像这样，我想要...

- Anurag

---

这是一篇关于如何提问技术问题的有用文章：http://mattgemmell.com/2008/12/08/what-have-you-tried/ - Deestan

我已经编辑并向@Deestan展示了。 - Anurag

抱歉代码格式出了问题。希望在处理过程中没有修改任何内容。 - zaf

@PrasathK 我展示了一张图片。 - Anurag

但是你在这里画的三角形是等边三角形，对吧？你想要等边三角形还是其他的？？ - Prasath K

Answer 1

好的，请看这个...等边三角形的实际演示

等边三角形内切圆半径 = sqrt(3)/6 * 三角形边长;

window.onload = function()
{
var c=document.getElementById("myCanvas");
var context =c.getContext("2d");

check(context,100,c.width/2,c.height/2);
circle(context,100,c.width/2,c.height/2);
}

function check(ctx, side, cx, cy){

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

    ctx.strokeStyle = "black";
    ctx.save();
    ctx.translate(cx, cy);
    ctx.beginPath();
    ctx.moveTo(0,-h/2);
    ctx.lineTo(-side/2, h / 2);  // line a
    ctx.lineTo(side /2, h / 2); // line b
    ctx.lineTo(0,-h /2);            // line c
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

}

function circle(ctx,side,cx,cy)
{
    var h = side * (Math.sqrt(3)/2);
    var radius = Math.sqrt(3)/6 * side; // Radius of the circle
    cy = cy + h/2 - radius;       // Center Y of circle
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI * 2,false);
    ctx.stroke();
    ctx.closePath();
}

检查所有公式以找到不同三角形内切圆的半径这里

- Prasath K