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 に答える