Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

现在我要做的是当用户点击画布时，使旋转的圆圈显示并旋转，因此鼠标点击的坐标是由用户，而不是给它任意坐标。如果你能帮助我，那就太棒了。如果你还可以告诉我如果用户点击代表黑洞的圆圈会很棒的话，如何让圆圈消失。非常感谢

Ps：没关系计算。

Answer 1

您可以将事件监听器附加到画布，如此

    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的新对象。当用户点击时，会使用鼠标坐标创建一个新的Orbiter，并将其添加到一个orbiters数组中。在每个循环中，我们将遍历Orbiters数组并更新每个循环。我不太清楚为什么要翻译整个画布而且我不确定我是否理解公式，但如果黑色整体不会旋转，我认为每个轨道器应该旋转画布。我还用更合适的requestAnimationFrame

替换了你的setInterval

如何在单击画布时让用户创建一个圆圈

1 个答案: