javascript - 如何让用户在单击 Canvas 时创建一个圆圈

Question

我是编程和 Canvas 元素的新手。我想创建一个黑洞模拟(使用基本物理概念)，我想知道如何为其添加交互性。这是我的代码:

window.onload = function () {
    var canvas = document.getElementById("space"),
    ctx = canvas.getContext('2d'),
    G = 6.67e-11, //gravitational constant 
    c = 3e8, //speed of light (m/s)
    M = 12e31, // masseof the blackhole in kg (60 solar masses)  
    Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
    pixel_Rs = Rs / 1e3,
    xb = canvas.width / 2, // x coordinate of the blackhole
    yb = canvas.height / 2,// y coordinate of the blackhole
    x = 400,
    y = yb,
    R = 6e3,
     // every pixel variable is a scaled distance           
    distance = (xb - x) * 1e4,
    pixel_distance = distance / 1e3,
    pixel_R = R / 1e3,
    vorbital = Math.sqrt((G * M) / distance),
    perimeter = 2 * Math.PI * distance,
    tcircle = perimeter / vorbital,
    dmsec = 1 / (tcircle / 10e-3),
    dradian = dmsec * 2 * Math.PI;

    setInterval(function () {

        ctx.fillStyle = "#032240";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(xb, yb, pixel_Rs, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle = "grey";
        ctx.beginPath();
        ctx.arc(x, y, pixel_R, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();

        ctx.save();
        ctx.translate(xb, yb);
        ctx.rotate(-dradian);
        ctx.translate(-xb, -yb);
    }, 20)
};

<canvas id="space" width="1400" height="850"></canvas>

现在我想做的是让旋转的圆在用户点击 Canvas 时出现并旋转，这样鼠标点击的坐标就是用户给的坐标，而不是给它任意坐标。如果你能帮助我，那就太好了。如果您还可以告诉我如何在用户单击代表黑洞的圆圈时使圆圈消失，那就太棒了。非常感谢

PS:别介意计算。

Answer 1

您可以像这样将事件监听器附加到 Canvas

    var canvas = document.getElementById('canvas');

    var mousePos;

    canvas.addEventListener('mousedown', function(event) {
        mousePos = {
            x: event.clientX,
            y: event.clientY
        }
    })

在这种情况下，mousePos 将是一个具有 x 和 y 坐标的对象。为了实现你需要的，你需要这样的东西

    var canvas = document.getElementById("space"),
    ctx = canvas.getContext('2d'),
    G = 6.67e-11, //gravitational constant 
    c = 3e8, //speed of light (m/s)
    M = 12e31, // masseof the blackhole in kg (60 solar masses)  
    Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
    pixel_Rs = Rs / 1e3,
    xb = canvas.width / 2, // x coordinate of the blackhole
    yb = canvas.height / 2,// y coordinate of the blackhole
    x = 400,
    y = yb,
    R = 6e3,
     // every pixel variable is a scaled distance           
    distance = (xb - x) * 1e4,
    pixel_distance = distance / 1e3,
    pixel_R = R / 1e3,
    vorbital = Math.sqrt((G * M) / distance),
    perimeter = 2 * Math.PI * distance,
    tcircle = perimeter / vorbital,
    dmsec = 1 / (tcircle / 10e-3),
    dradian = dmsec * 2 * Math.PI;

    var orbitals = [];

    function Orbital(x, y) {
      this.x = x;
      this.y = y;
    }

    Orbital.prototype.setup = function() {

    };

    Orbital.prototype.draw = function() {
      var mousePos = {
        x: this.x,
        y: this.y
      }

      ctx.fillStyle = "grey";
      ctx.beginPath();
      ctx.arc(mousePos.x, mousePos.y, pixel_R, 0, 2 * Math.PI, false);
      ctx.closePath();
      ctx.fill();
    };

    function draw() {

      ctx.fillStyle = "#032240";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.arc(xb, yb, pixel_Rs, 0, 2 * Math.PI, false);
      ctx.closePath();
      ctx.fill();

      orbitals.forEach(function(orbital) {
        orbital.draw();
      });

      ctx.save();
      ctx.translate(xb, yb);
      ctx.rotate(-dradian);
      ctx.translate(-xb, -yb);

      window.requestAnimationFrame(draw);
    }


    canvas.addEventListener('mousedown', function(event) {
      orbitals.push(new Orbital(event.clientX, event.clientY));
    });



    (function() {
      window.requestAnimationFrame(draw);
    }());

有几点需要注意。我创建了一个名为 Orbiter 的新对象。当用户单击时，会使用鼠标坐标创建一个新的轨道飞行器，并将其添加到轨道飞行器数组中。在每次循环中，我们将循环遍历轨道器数组并更新每个轨道器。我不太清楚为什么你要平移整个 Canvas ，我也不确定我是否理解这些公式，但如果黑色整体不会旋转，我认为每个轨道飞行器都应该旋转 Canvas 。我还用更合适的 requestAnimationFrame

替换了您的 setInterval