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

【问题标题】：adding custom animation in canvas html5在画布html5中添加自定义动画
【发布时间】：2019-03-01 08:44:00
【问题描述】：

这可能有点困难，但我还是会问，所以我做了一个星空，现在我想做的是让我的星星（每个一对）通过一条线相互连接，现在这条线将随着当星星移出画布时星星会向前移动并消失。在这里将不胜感激任何帮助这很难我有逻辑但我似乎无法遵循正确的方法来实现它

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

下面我使用了canvas apilineTo，即使是固定的线宽，最终的结果还是很不错的。

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

&lt;canvas id='tutorial' width='1500' height='1500'&gt;&lt;/canvas&gt;

【讨论】：

不，不是灯光效果。
当圆圈出现时，它们中的一对应该通过一条线相互连接，当它们随着进行而分开时，线应该扩大并在相距太远时消失并移出画布
我更新了代码以使用行而不是更便宜的方法。
我想你不明白我在说什么，我的意思是两个相反的圆圈应该通过一条线相互连接，随着移动的距离越来越远，然后消失
为此，您需要一种渲染扩展线的方法。画布 API 不支持这一点，因此您必须计算 3D 投影或找到模拟它的方法。