3

我正在创建“使用画布在三角形中画一个圆圈”。但是面临很多问题。好吧，我尝试在画布中间绘制和三角形，尽管它已创建，但我想知道从哪里开始绘制一个对我来说可能完美的圆圈。

相对于数学我知道画圆，但是当涉及到 java 脚本时我被卡住了。

请帮助我。

谢谢。

我尝试使用以下代码在画布中心绘制训练：-

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

}

在此处输入图像描述

像这样我想要..

4

1 回答 1

2

好的，检查一下..等边三角形的现场演示

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

检查所有公式以在此处找到不同三角形内接圆的半径

于 2013-03-22T11:50:33.807 回答