javascript - 编辑javascript Canvas 动画

Question

我有点小麻烦。我想使用以下动画:<强> http://codepen.io/chuckeles/pen/mJeaNJ

主要问题，如何编辑它，而不是点，会有小图像？应该改在哪一部分？我不知道从哪里开始，所以我需要一些指导，我应该在哪一部分编辑代码以将点更改为图像。任何帮助或建议将不胜感激。完整的 Javascript 代码在这里:

// --- CANVAS ---

var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");

// --- UTILS ---

// request frame
var requestFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

// window resizing
(window.onresize = function() {
  // set new canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
})();

// --- STARS ---

var Star = function(x, y) {
  this.x = x || 0;
  this.y = y || 0;

  this.mx = 0;
  this.my = 0;

  this.distance = 0;
  this.mult = Math.random() * 0.4 + 0.6;
};

// --- GLOBALS ---

// the star array
var stars = [];

// stars to remove from the array
var starsToRemove = [];

// create random stars
for (var i = 0; i < 60; ++i) {
  // pos
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;

  // create
  stars.push(new Star(x, y));
}

// --- SETUP ---

// disable smoothing
ctx.imageSmoothingEnabled = false;

// --- MAIN LOOP ---

// loop function
var loop = function() {

  // --- UPDATE ---

  // create random stars
  var chance = 0.2;
  var asp = canvas.width / canvas.height;
  if (Math.random() < chance)
    stars.push(
      new Star(0, Math.random() * canvas.height) // left
      );
  if (Math.random() < chance)
    stars.push(
      new Star(canvas.width, Math.random() * canvas.height) // right
      );
  if (Math.random() < chance * asp)
    stars.push(
      new Star(Math.random() * canvas.width, 0) // top
      );
  if (Math.random() < chance * asp)
    stars.push(
      new Star(Math.random() * canvas.width, canvas.height) // botton
    );

  // update stars
  stars.forEach(function(star) {
    // update motion
    star.mx = -(star.x - canvas.width / 2) / 300;
    star.my = -(star.y - canvas.height / 2) / 300;

    // apply motion
    star.x += star.mx * star.mult;
    star.y += star.my * star.mult;

    // update distance
    star.distance = Math.sqrt(
      Math.pow((star.x - canvas.width / 2), 2) +
      Math.pow((star.y - canvas.height / 2), 2)
    );

    // remove if close to the center
    if (star.distance < 40 * star.mult)
      starsToRemove.push(star);
  });

  // remove stars
  starsToRemove.forEach(function(toRemove) {
    stars.splice(stars.indexOf(toRemove), 1);
  });
  starsToRemove = [];

  // --- DRAW ---

  // clear
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // get image data
  var data = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // for each star
  stars.forEach(function(star) {
        // get pos
    var x = Math.floor(star.x);
    var y = Math.floor(star.y);

    // draw a pixel
    var i = y * data.width + x;
    data.data[i * 4 + 0] = 255;
    data.data[i * 4 + 1] = 255;
    data.data[i * 4 + 2] = 255;

    // apply alpha based on distance
    var a = (star.distance - 40 * star.mult) / (canvas.width / 2 - 40 * star.mult);
    data.data[i * 4 + 3] = 255 * a * star.mult;
  });

  // put back
  ctx.putImageData(data, 0, 0);

  // new loop
  requestFrame(loop);

};

// start loop
requestFrame(loop);

Answer 1

您可能想在评论后对其进行编辑:

  // --- DRAW ---

您可能想要更改 Canvas 绘制方法。例如，行

ctx.clearRect(0, 0, canvas.width, canvas.height);

可能会清除以 Canvas 大小绘制的所有像素。

可能会根据其大小从 Canvas 像素返回一个数组。

ctx.getImageData(0, 0, canvas.width, canvas.height);

可能绘制每个像素(星号)。

// for each star
stars.forEach(function(star) {
    // get pos
    var x = Math.floor(star.x);
    var y = Math.floor(star.y);

    // draw a pixel
    var i = y * data.width + x;
    // change pixel color
    data.data[i * 4 + 0] = 255;//Red = 255
    data.data[i * 4 + 1] = 255;//Green = 255
    data.data[i * 4 + 2] = 255;//Blue = 255
    // ^ color (rgb)

    // apply alpha based on distance
    var a = (star.distance - 40 * star.mult) / (canvas.width / 2 - 40 * star.mult);
    data.data[i * 4 + 3] = 255 * a * star.mult;
});
// put back
ctx.putImageData(data, 0, 0);
// ^ this line update the canvas pixels edited as above

使用 DOM 方法，您可以在 Canvas 中绘制 span 或 div 而不是像素，但这样做对性能不利。