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

Question

will try to be clear here , in this starfeild animation what i want to add is that when the circles originate a pair each should attached by a line to eachother and as the move forward and apart the line will expand and at the point will disappear when the circles move out of the canvas anyhelp would be appreciated 我将要补充的是，在这个繁星点点的动画中，我要添加的是，当圆产生一对时，每个圆应彼此之间用一条线连接，并且随着前进和分开，线将扩大，并且当该点消失时，圆圈移出画布，任何帮助将不胜感激

 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

Did you mean smth like this? 你是说这样的意思吗？ https://jsfiddle.net/arfeo/b2rkzxy9/ 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 个解决方案

解决方案1
1 已采纳 2018-09-27 16:57:40

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-09-27 16:57:40

解决方案1
1 已采纳 2018-09-27 16:57:40