如何获取椭圆边框的坐标

Posted 2021-04-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取椭圆边框的坐标相关的知识，希望对你有一定的参考价值。

如何获得绘制椭圆边框的所有坐标？我可以用画布画它。

我的想法是获取所有坐标并将它们存储到一个数组中。单击画布时，我想检查该点是否在椭圆的边框中。

答案

只需重新定义您的路径（不绘制它），然后使用（而不是isPointInPath（））：

ctx.isPointInStroke(x, y)

它甚至会考虑行程的线宽。

此解决方案的问题是IE（）中不支持这些路径检查。为此，您需要一个手动解决方案。但是对于那些（你可以检查这个功能）的浏览器，简单地使用它：

Example

var ctx = document.querySelector("canvas").getContext("2d");

function getEllipse(ctx, cx, cy, rx, ry) {   // render an ellipse
  var angleStep = 0.05, angle = angleStep;
  ctx.moveTo(cx + rx, cy);                   // start at angle 0
  while(angle < Math.PI*2) {
    ctx.lineTo(
      cx + rx * Math.cos(angle),             // store these to an array as wanted
      cy + ry * Math.sin(angle)
    );
    angle += angleStep
  }
  ctx.closePath();
}

// draw an ellipse:
getEllipse(ctx, 150, 75, 100, 60);
ctx.lineWidth = 10;
ctx.stroke();

// reuse ellipse path when checking for mouse position
ctx.canvas.onmousemove = function(e) {
  ctx.clearRect(0,0,300,150);
  var rect = this.getBoundingClientRect(),    // get adjusted mouse position
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;
  
  ctx.strokeStyle = ctx.isPointInStroke(x, y) ?  "red" : "black";
  
  ctx.stroke();
};

<canvas></canvas>

以上是关于如何获取椭圆边框的坐标的主要内容，如果未能解决你的问题，请参考以下文章