캔버스 컨텍스트의 상자 크기를 얻는 방법?

Question

저는 캔버스 요소를 HTML로 사용하려고합니다.

나는 경로로 이미지를 덮고있는 걸림돌을 때렸다. 누군가 경로를 클릭하면 isPointInPath 메서드를 사용하여 어떤 경로를 클릭했는지 알 수 있습니다.

문제는 경로의 바깥 쪽 테두리로 확대 된 이미지를 다시 그리지 만 그 정보를 검색하는 방법을 볼 수 없다는 것입니다.

ctx.beginPath(); 
ctx.arc(can.width/2, can.height/2, can.height/2.5, ((2 * Math.PI)/10) * 7, (2 * Math.PI)/10); 
ctx.lineTo(can.width/2, can.height/2); 
ctx.closePath(); 

이 바이올린 http://jsfiddle.net/JohnSReid/78PEX/에서 저는 호를 그렸습니다. 위의 코드에서 내가 그린 점을 사용하면 원호의 바깥 쪽 점을 자릅니다.

호가 사용하는 영역의 전체 크기를 잡아낼 방법이 있습니까?

Answer 1

데모 :이 같은 모든 원의 둘레에 점 (또는 아크) 얻을 수 http://jsfiddle.net/m1erickson/9xgwY/

:

function XYonCircle(cx,cy,radius,radians){ 
    var x=cx+radius*Math.cos(radians); 
    var y=cy+radius*Math.sin(radians); 
    return({x:x,y:y}); 
} 

이의 경계 상자를 얻으려면 당신의 아크 :

var cw=canvas.width; 
var ch=canvas.height; 
var PI2=Math.PI*2; 

var left=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10*7).x; 
var top=XYonCircle(cw/2,ch/2,ch/2.5,PI2*.75).y; 
var right=XYonCircle(cw/2,ch/2,ch/2.5,0).x; 
var bottom=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10).y; 

아크를 변경하면 일부 0, PI/2, PI & PI * 3/2를 통해 통과하는 각도 중 하나에 바운딩 점이 있습니다.

나머지 경계점은 호의 시작과 끝 부분에 있습니다.