Question

在这里将试图变得清晰，在这个繁星点点的动画中，我要添加的是，当圆产生一对时，每个圆应彼此之间用一条线连接，并且随着前进和分开，该线将在该点处扩展当圆圈移出画布时将消失任何帮助将不胜感激

function randomRange(minVal, maxVal) {
  return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
}

function initStars() {
  for (var i = 0; i < stars.length; i++) {
    stars[i] = {
      x: randomRange(-25, 25),
      y: randomRange(-25, 25),
      z: randomRange(1, MAX_DEPTH)
    }
  }
}

function degToRad(deg) {
  radians = (deg * Math.PI / 180) - Math.PI / 2;
  return radians;

}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    stars[i].z -= 0.2;

    if (stars[i].z <= 0) {
      stars[i].x = randomRange(-25, 25);
      stars[i].y = randomRange(-25, 25);
      stars[i].z = MAX_DEPTH;
    }

    var k = 128.0 / stars[i].z;
    var px = stars[i].x * k + halfWidth;
    var py = stars[i].y * k + halfHeight;

    if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
      var size = (1 - stars[i].z / 32.0) * 5;
      var shade = parseInt((1 - stars[i].z / 32.0) * 750);
      ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
      ctx.beginPath();
      ctx.arc(px, py, size, degToRad(0), degToRad(360));
      ctx.fill();
    }
  }
}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    stars[i].z -= 0.2;

    if (stars[i].z <= 0) {
      stars[i].x = randomRange(-25, 25);
      stars[i].y = randomRange(-25, 25);
      stars[i].z = MAX_DEPTH;
    }

    var k = 128.0 / stars[i].z;
    var px = stars[i].x * k + halfWidth;
    var py = stars[i].y * k + halfHeight;

    if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
      var size = (1 - stars[i].z / 32.0) * 5;
      var shade = parseInt((1 - stars[i].z / 32.0) * 750);
      ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
      ctx.beginPath();
      ctx.arc(px, py, size, degToRad(0), degToRad(360));
      ctx.fill();
    }
  }
}

<!DOCTYPE html5>
<html>

<head>
  <title>stars</title>

  <script src="convergis.js"></script>
  <script>
    MAX_DEPTH = 32;

    var canvas, ctx;
    var stars = new Array(500);

    window.onload = function() {
      canvas = document.getElementById("tutorial");
      if (canvas && canvas.getContext) {
        ctx = canvas.getContext("2d");
        initStars();
        setInterval(animate, 17);
      }
    }
  </script>
</head>

<body>
  <canvas id='tutorial' width='1500' height='1500'>
  
  </canvas>
</body>

</html>

Answer 1

您的意思是这样吗？ https://jsfiddle.net/arfeo/b2rkzxy9/

var MAX_DEPTH = 32;
var canvas, ctx;
var stars = new Array(500);

canvas = document.getElementById("tutorial");

if (canvas && canvas.getContext) {
  ctx = canvas.getContext("2d");
  initStars();
  setInterval(animate, 17);
}

function randomRange(minVal, maxVal) {
  return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
}

function initStars() {
  for (var i = 0; i < stars.length; i++) {
    stars[i] = {
      x: randomRange(-25, 25),
      y: randomRange(-25, 25),
      z: randomRange(1, MAX_DEPTH)
    }
  }
}

function degToRad(deg) {
  radians = (deg * Math.PI / 180) - Math.PI / 2;

  return radians;
}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length - 1; i += 1) {
    stars[i].z -= 0.2;

    if (stars[i].z <= 0) {
      stars[i].x = randomRange(-25, 25);
      stars[i].y = randomRange(-25, 25);
      stars[i].z = MAX_DEPTH;
    }

    var k = 128.0 / stars[i].z;
    var px = stars[i].x * k + halfWidth;
    var py = stars[i].y * k + halfHeight;
    var nextPx = stars[i + 1].x * k + halfWidth;
    var nextPy = stars[i + 1].x * k + halfWidth;

    if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
      var size = (1 - stars[i].z / 32.0) * 5;
      var shade = parseInt((1 - stars[i].z / 32.0) * 750);

      ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
      ctx.beginPath();
      ctx.arc(px, py, size, degToRad(0), degToRad(360));
      ctx.fill();

      if (px > 0 && px < canvas.width &&
            py > 0 && py < canvas.height &&
          nextPx > 0 && nextPx < canvas.width &&
          nextPy > 0 && nextPy < canvas.height) {
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(nextPx, nextPy);
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();
      }
    }
  }
}

用画布中的形状对线条进行动画处理

1 个答案: