用画布中的形状动画线条答案

【问题标题】：animating lines with shapes in canvas用画布中的形状动画线条
【发布时间】：2019-03-03 15:04:16
【问题描述】：

将在这里尝试清楚，在这个 starfeild 动画中，我想补充的是，当圆圈产生一对时，每个圆圈应该通过一条线相互连接，并且随着向前和分开线将扩大并在该点当圆圈移出画布时将消失任何帮助将不胜感激

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>

【问题讨论】：

标签： javascript animation html5-canvas

【解决方案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();
      }
    }
  }
}

【讨论】：