绘图使用画布在三角形中刻录圆形

Question

我正在创造     “用画布在三角形上刻一个圆圈”。但面临很多问题。好吧，我试图在画布中间绘制和三角形虽然它创建了但我想知道从哪里开始绘制一个对我来说完全有用的圆圈。

在数学方面，我知道要绘制圆圈，但是当谈到java脚本时，我被卡住了。

请帮助我。

感谢。

我尝试使用以下代码在画布的中心绘制一个traing： -

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

}

像这样我想要..

Answer 1

好的，请检查一下.. Live Demo for equilateral triangle

  

等边三角形内圆的半径= 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();
}

检查所有公式，找到刻在不同三角形here

中的圆的半径