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://www.shadertoy.com/view/Xdl3D2

在下面，我使用了画布API lineTo，即使线宽固定，最终的效果还是不错的。

var MAX_DEPTH = 64;
var LINELENGTH = 0.1;
var stars = new Array(500);
var canvas = document.getElementById("tutorial");
canvas.width = innerWidth;
canvas.height = innerHeight;
var 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 = "rgba(0,0,0,1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
stars[i].z -= 0.5;

if (stars[i].z <= 0) {
  stars[i].x = randomRange(-25, 25);
  stars[i].y = randomRange(-25, 25);
  stars[i].z = MAX_DEPTH;
}

var k = 254.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) * 2;
  var shade = parseInt((1 - stars[i].z / 32.0) * 750);
  ctx.strokeStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
  ctx.lineWidth = size;
  ctx.beginPath();
  ctx.moveTo(px,py);
  var ox = size * (px - halfWidth) * LINELENGTH;
  var oy = size * (py - halfHeight) * LINELENGTH;
  ctx.lineTo(px + ox, py + oy);
  ctx.stroke();
}
  }
}

<canvas id='tutorial' width='1500' height='1500'></canvas>

在画布html5中添加自定义动画

1 个答案: