Làm thế nào để vẽ chỉ phần này của vòng cung?

Hãy nhìn vào bức tranh này:Làm thế nào để vẽ chỉ phần này của vòng cung?

enter image description here

Tôi biết p1, p2, và trung tâm, đó là điểm 2d. Tôi cũng biết góc p1-center-p2 và bán kính r.

Làm cách nào tôi có thể vẽ chỉ phần được lấp đầy của cung bằng cách sử dụng vòng tròn hàm của canvas()?

EDIT

Những gì tôi thực sự cần phải làm là, cho 2 điểm và một góc, vẽ một đường cong giữa 2 điểm mà góc p1-center-p2 là góc nhất định.

Điều tôi làm là tính trung tâm và bán kính của chu vi có 2 điểm trong đó và bây giờ tôi cần vẽ đường thẳng nối p1 và p2 và có góc đã cho. Đây là chức năng của tôi để tính toán trung tâm của circunference (mà hoạt động đúng)

function getCenter(v0x, v0y, v1x, v1y, curve) { 
    // result = p0 
    resx = parseFloat(v0x); 
    resy = parseFloat(v0y); 

    // tmpvec = (p1 - p0) * .5 
    tmpx = (v1x - v0x)/2; 
    tmpy = (v1y - v0y)/2; 

    // result += tmpvec 
    resx = resx + tmpx; 
    resy = resy + tmpy; 

    // rotate 90 tmpvec 
    tmptmpx = tmpx; 
    tmptmpy = tmpy; 
    tmpy = -tmptmpx; 
    tmpx = tmptmpy; 

    // tmpvec *= 1/tan(c/2) 
    tmpx *= 1/Math.tan(curve/2); 
    tmpy *= 1/Math.tan(curve/2); 

    // return res + tmpvec 
    return [resx+tmpx, resy+tmpy]; 
}

Nguồn

2011-12-08 Ivan

Chức năng atan2(y,x) là hữu ích cho việc tính toán góc đến các điểm trong một vòng tròn.

function drawArcPart(cx, cy, radius, p1x, p1y, angle) { 

    var x = p1x - cx; 
    var y = p1y - cy; 

    var startAngle = Math.atan2(y,x); 
    var endAngle = startAngle - angle; 

    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.fillStyle='black'; 
    ctx.beginPath(); 
    ctx.arc(cx, cy, radius, startAngle, endAngle, true); 
    ctx.fill(); 
}

enter image description here

Tôi đã tải lên JavaScript này để jsFiddle, với một phần mở rộng mà còn thu hút các điểm, và cả hai ví dụ của bạn.

Nguồn

2011-12-08 00:44:02 Jonas

Nhưng tôi có những thứ khác rút ra mà tôi không muốn xóa – Ivan

Những gì tôi thực sự cần là một cái gì đó như: moveTo (p1) arcTo (p2, bán kính) – Ivan

này dường như không có tác dụng khi p1 có thành phần x khác với p2: http://i.imgur.com/AKpgv.png – Ivan

Hãy thử điều này

<html> 
    <head></head> 
<body onload="drawShape();"> 
<div> 
    <canvas id="tutorial" width="150" height="200"></canvas> 
</div> 
<SCRIPT type="text/javascript"> 
function drawShape(){ 
    // get the canvas element using the DOM 
    var canvas = document.getElementById('tutorial'); 
    // Make sure we don't execute when canvas isn't supported 
    if (canvas.getContext){ 
     var ctx = canvas.getContext('2d'); 

     ctx.beginPath(); 
     var x   = 100;    // x coordinate 
     var y   = 100;    // y coordinate 
     var radius  = 100;     // Arc radius 
     var startAngle = (Math.PI)-((Math.PI)/4);      // Starting point on circle 
     var endAngle = (Math.PI)+((Math.PI)/4); // End point on circle 
     ctx.arc(x,y,radius,startAngle,endAngle, false);  
     ctx.fill(); 
    } else { 
     alert('You need Safari or Firefox 1.5+ to see this demo.'); 
    } 
} 
</SCRIPT> 
</body> 
</html>

Đó là một ví dụ sửa đổi từ mozilla HTML5 tuts

Và kết quả là here

Đây có phải là những gì bạn muốn?

Nguồn

2011-12-08 01:10:18 kcsoft

Làm thế nào để vẽ chỉ phần này của vòng cung?

Trả lời

Các vấn đề liên quan