绘图使用帆布在三角形中刻出圆圈

我正在创建 “使用帆布在三角形中刻出圆圈”。但面临很多问题。那么我试图在画布中间画和三角形，虽然它创建了我想知道从哪里开始绘制一个圆圈，这对我来说可能是完美的。绘图使用帆布在三角形中刻出圆圈

与数学分别我知道画圈，但谈到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

绘图使用帆布在三角形中刻出圆圈

回答

相关问题