繪圖使用帆布在三角形中刻出圓圈

我正在創建「使用帆布在三角形中刻出圓圈」。但面臨很多問題。那麼我試圖在畫布中間畫和三角形，雖然它創建了我想知道從哪裏開始繪製一個圓圈，這對我來說可能是完美的。繪圖使用帆布在三角形中刻出圓圈

與數學分別我知道畫圈，但談到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(); 

}

enter image description here

這樣我想..

來源

2013-03-22 Anurag

這是一個有用的帖子上提出的技術問題：http://mattgemmell.com/2008/12/08/what -have-you-tried/ – Deestan 2013-03-22 08:15:01

我已編輯並顯示@Deestan – Anurag 2013-03-22 08:56:11

對不起，代碼格式化打嗝。希望我沒有修改過程中的任何內容。 – zaf 2013-03-22 09:00:37

好檢查這個.. 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

來源

2013-03-22 11:50:33

繪圖使用帆布在三角形中刻出圓圈

回答

相關問題