javascript. canvas. 임의의 두 점을 지름으로 하는 원호 그리기

아래와 같이 하면 됩니다.

function midPt( pt1, pt2 ){
    return {
        x : pt1.x + ( pt2.x - pt1.x ) / 2,
        y : pt1.y + ( pt2.y - pt1.y ) / 2
    };
}
function dist( pt1, pt2 ){
    var xs = 0;
    var ys = 0;

    xs = pt2.x - pt1.x;
    xs = xs * xs;

    ys = pt2.y - pt1.y;
    ys = ys * ys;

    return Math.sqrt( xs + ys );
}

var pt1 = { x : 30, y : 30 };
var pt2 = { x : 100, y : 100 };
var ptMid = midPt( pt1, pt2 );
var r = dist( ptMid, pt1 );
var d1 = Math.atan2( pt1.y - ptMid.y, pt1.x - ptMid.x );
var d2 = Math.atan2( pt2.y - ptMid.y, pt2.x - ptMid.x );

var c = document.createElement( 'canvas' );
c.width = 300;
c.height = 300;
document.body.appendChild( c );

var ctx = c.getContext( '2d' );

ctx.beginPath();
ctx.moveTo( pt1.x, pt1.y );
ctx.lineTo( pt2.x, pt2.y );
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc( ptMid.x, ptMid.y, r, d1, d2, false );
ctx.stroke();
ctx.closePath();


http://jsfiddle.net/acidraincity/nLz7u6rp/6/


다른글 읽기