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);

使用arc（）获取画布圆当前半径

1 个答案: