Question

我试图进行黑洞模拟，虽然我差不多完成了，但我希望逐渐消失在黑洞上绘制的点，这是我的代码：

 <!DOCTYPE html>
 <html lang="en">
  <head>
       <meta charset="utf-8" />
       <title>test trou noir</title>
       <script>
var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11,//gravitational constant
pixel_G = G/1e-11,
c = 3e8, //speed of light (m/s)
M = 12e31,// masseof the blackhole in kg (60 solar masses)
pixel_M = M/1e32  
Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
pixel_Rs = Rs/1e3, // scaled radius 
ccolor=128;      

 function update() {
 var pos, i, distance, somethingMoved = false;
 for (i = 0; i < circles.length; i++) {
    pos = circles[i].position;
    distance = Math.sqrt(((pos.x - 700) * (pos.x - 700)) + ((pos.y - 400) * (pos.y - 400)));
    if (distance > pixel_Rs && visible(circles[i])) {
        var delta = new Vector2D(0, 0);
        var forceDirection = Math.atan2(pos.y - 400, pos.x - 700);
      var evelocity = Math.sqrt( (2*pixel_G*pixel_M)/(distance*1e-2));
        delta.x += Math.cos(forceDirection) * evelocity;
        delta.y += Math.sin(forceDirection) * evelocity;
        pos.x += delta.x;
        pos.y += delta.y;
        somethingMoved = true;
    }
}
   if (somethingMoved) {
    drawEverything();
    requestAnimationFrame(update);
   } else {
    ccolor -=10;

    };
     }

function visible(ball) {
return ball.position.x > ball.radius && ball.position.x < canvas.width - ball.radius &&
    ball.position.y > ball.radius && ball.position.y < canvas.height - ball.radius;
}

function drawEverything() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blackhole.draw(ctx);
for (var i = 0; i < circles.length; i++) {
    if (visible(circles[i])) {
        circles[i].draw(ctx);
    }
   }
 }

function init() {
canvas = document.getElementById("space");
ctx = canvas.getContext('2d');
blackhole = new Ball(pixel_Rs, {
    x: 700,
    y: 400
}, "black");

for (var i = 0; i < 200; i++) {
    var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
    circle = new Ball(5, vec2D, 'rgba('+ccolor+','+ccolor+','+ccolor+',1)');
    circles.push(circle);
}
drawEverything();
requestAnimationFrame(update);
 }


function Ball(radius, position, color) {
this.radius = radius;
this.position = position;
this.color = color;
 }
 Ball.prototype.draw = function(ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
};

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


 window.onload = init;

    </script>
    <style>
        body {
            background-color: #021c36;
           margin: 0px; 
        }
    </style>
</head>
<body>
    <canvas id="space" , width="1400" , height="800">
    </canvas>
</body>
</html>

现在你可以看到，我创建了一个名为ccolor的变量，它集成在rgba代码中，但我不知道为什么颜色不会趋于零，所以内部的圆圈黑洞逐渐消失，如果有人能借给我一只手，那就太棒了

Answer 1

在更新中，如果Blackhole捕获了任何circles[i]，则会减少其this.color。如果您将this.color更改为用于创建fillStyle的整数，则可能会更容易：

ctx.fillStyle='rgba(' + this.color + ',' + this.color + ',' + this.color + ',1)'.

这是一个快速演示：

查看此演示全页或黑洞在屏幕外

var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11, //gravitational constant
  pixel_G = G / 1e-11,
  c = 3e8, //speed of light (m/s)
  M = 12e31, // masseof the blackhole in kg (60 solar masses)
  pixel_M = M / 1e32
Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
  pixel_Rs = Rs / 1e3, // scaled radius 
  ccolor = 128;

function update() {
  var pos, i, distance, somethingMoved = false;
  for (i = 0; i < circles.length; i++) {
    pos = circles[i].position;
    distance = Math.sqrt(((pos.x - 700) * (pos.x - 700)) + ((pos.y - 400) * (pos.y - 400)));
    if (distance > pixel_Rs && visible(circles[i])) {
      var delta = new Vector2D(0, 0);
      var forceDirection = Math.atan2(pos.y - 400, pos.x - 700);
      var evelocity = Math.sqrt((2 * pixel_G * pixel_M) / (distance * 1e-2));
      delta.x += Math.cos(forceDirection) * evelocity;
      delta.y += Math.sin(forceDirection) * evelocity;
      pos.x += delta.x;
      pos.y += delta.y;
      somethingMoved = true;
    } else {
      circles[i].color -= 0.50;
    }
  }
  if (somethingMoved) {
    drawEverything();
    requestAnimationFrame(update);
  };
}

function visible(ball) {
  return ball.position.x > ball.radius && ball.position.x < canvas.width - ball.radius &&
    ball.position.y > ball.radius && ball.position.y < canvas.height - ball.radius;
}

function drawEverything() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  blackhole.draw(ctx);
  for (var i = 0; i < circles.length; i++) {
    if (visible(circles[i])) {
      circles[i].draw(ctx);
    }
  }
}

function init() {
  canvas = document.getElementById("space");
  ctx = canvas.getContext('2d');
  blackhole = new Ball(pixel_Rs, {
    x: 700,
    y: 400
  }, 0);

  for (var i = 0; i < 200; i++) {
    var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
    circle = new Ball(5, vec2D, ccolor);
    circles.push(circle);
  }
  drawEverything();
  requestAnimationFrame(update);
}

function Ball(radius, position, color) {
    this.radius = radius;
    this.position = position;
    this.color = color;
  }
  //
Ball.prototype.draw = function(ctx) {
  var c=parseInt(this.color);
  ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',1)';
  ctx.beginPath();
  ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
};

function Vector2D(x, y) {
  this.x = x;
  this.y = y;
}

init();

body{ background-color: #021c36; margin: 0px; }

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

Answer 2

简单的解决方案：在drawEverything()函数中移动blackhole.draw(ctx)是最后一步

不那么简单：使用众多JS粒子系统中的一个

如何使用画布中的rgba颜色更改条件的颜色

2 个答案: