добавление пользовательской анимации в canvas html5 - PullRequest
Новая
       9

добавление пользовательской анимации в canvas html5

0 голосов
/ 25 сентября 2018

это может быть несколько сложно, но я все равно буду спрашивать, поэтому я сделал звездное поле, и теперь я хочу, чтобы мои звезды (каждая пара) были соединены друг с другом линией, теперь эта линия будет расширяться по мере того, какзвезды движутся вперед и исчезают, когда звезды уходят с холста. Здесь будет полезна любая помощь, это сложно, у меня есть логика, но я, кажется, не могу следовать верному способу ее реализации 

        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>

1 Ответ

0 голосов
/ 25 сентября 2018

Можно просто сказать, что вам нужен эффект скорости света!

Один из очень дешевых способов сделать это - нарисовать фон с некоторой прозрачностью.Вы также можете визуализировать набор точек близко друг к другу, чтобы создать иллюзию эффекта.

Хороший способ сделать это - шейдеры, поскольку они позволят вам добавить свечение и некоторые другие приятные хитрости с изображениями, которые сделают его лучше.Вот хороший пример: https://www.shadertoy.com/view/Xdl3D2

Ниже я использовал canvas 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...