）（アークで設定したキャンバス円現在の半径を取得

Question

私はこのようなキャンバス上に円を設定している：私は円の半径の値を見て興味を持っていて

var ctx = $element.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(100, 100, 50, 0, 2 * Math.PI); 

質問は、私は後でアークの値を取得する方法です？

console.log(ctx.arc()) // this does not work 

Answer 1

ほとんどの2DコンテキストAPIの関数は、単なるレンダリング関数です。彼らはキャンバスにコンテンツをレンダリングし、大部分は何をどこで忘れるか。

描画する内容を把握したい場合は、ある種の参照リスト/配列を作成する必要があります。

例えば

const arcs = []; 
ctx.arc(x,y,r,0,Math.PI*2); 
arcs.push({x,y,r}); 

あなたは、配列を経由してアクセスすることができます。

console.log(arcs[0].r); 

通常、弧であるオブジェクトを定義して配列に格納することが一般的です。円弧には、キャンバスにレンダリングする描画関数があります。

const arc = { 
    x : 0, // defaults 
    y : 0, 
    r : 0, 
    draw() { 
     ctx.arc(this.x,this.y,this.r,0,Math.PI * 2); 
    } 
} 

function createArc(x,y,r){ 
     return Object.assign({},arc,{x,y,r}); 
} 
const arcs = []; 
arcs.push(createArc(100,100,50)); 
arcs[0].draw(); 
console.log(arcs[0].r);