在 JavaScript 中为其添加动画效果时更改图像颜色

Edit

好的，所以如果你只需要画那些移动的星星，你可以简化很多代码，特别是关于改变颜色：
由于每颗星星只是一个彩色矩形，因此您只需存储一个color值（即十六进制）并在您想要所需的颜色时对其进行更新。无需位图计算。
但是，就像您的代码现在一样，如果您尝试创建新星形，它们都将遵循相同的路径并缩放更新。
我认为你将不得不重新考虑你更新立场的方式。

这是一个更新，简化了代码和显示问题的示例

function createStars() {
  var imgCanvas = document.createElement('canvas');
  imgCanvas.height = "500";
  imgCanvas.width = "500";
  var imgCtx = imgCanvas.getContext('2d');
  imgCtx.fillStyle = 'black';
  imgCtx.fillRect(0, 0, 500, 500)
  imgCtx.fillStyle = '#FF0';
  for (i = 0; i < Math.floor(Math.random() * 500) + 250; i++) {
    imgCtx.fillRect(Math.random() * 500, Math.random() * 500, 1, 1)
  }
  document.body.style.backgroundImage = 'url(' + imgCanvas.toDataURL() + ')';
}
createStars();
var canvas = null;
var ctx = null;
var slider = null;
var vBox = null;
var x = 50;
var y = 50;
var center = {
  x: 0,
  y: 0
};
var radius = 50.0;
var angle = 0;
var result = false;
var color = "FF0"; // set the color as a global variable, avoiding a function to set it
var stars = []; // set an array that will contain all our moving stars
function start() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  result = setOtherReferences();
  // append new stars to our array
  stars.push(createStar());
  stars.push(createStar());
  stars.push(createStar());
  // start the Loop()
  Loop();
}
function setOtherReferences() {
  slider = document.getElementById("rangeInput");
  vBox = document.getElementById("textbox");
  center.x = canvas.width / 3;
  center.y = canvas.height / 3;
  return true;
}
function createStar() {
  // set moving stars as object, with their own x,y,width and height properties.
  var star = {
    xStart: Math.random() * 150,  // used in order to avoid the exact 
    yStart: Math.random() * 150, // same position of your stars
    x: this.xStart,
    y: this.yStart,
    w: 50,
    h: 50
  }
  return star;
}
function drawImg() {
  // set the moving stars color to the actual growing/shrinking state
  ctx.fillStyle = color;
  // for each of our moving stars, draw a rect
  for (i = 0; i < stars.length; i++) {
    ctx.fillRect(stars[i].x, stars[i].y, stars[i].w, stars[i].h);
  }
}
function Loop() {
  window.setTimeout(Loop, 100);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  angle += Math.PI * 0.05;
  /* 
     Here is the main issue 
     as each of our stars x/y pos are updated with the same function,
     they will follow each others.
     I added the xStart property so they're not 
     exactly at the same position for you beeing able to see it.
  */
  for (i = 0; i < stars.length; i++) {
    stars[i].x = center.x + radius * Math.cos(angle) + stars[i].xStart;
    stars[i].y = center.y + radius * Math.sin(angle) + stars[i].yStart;
  }
  vBox.value = slider.value;
  updateStarScale();
  drawImg();
}
function updateStarScale() {
  //same as above, each of our stars will have the same scale update
  for (i = 0; i < stars.length; i++) {
    if (vBox.value > 0) {
      stars[i].w += vBox.value / 10;
      stars[i].h += vBox.value / 10;
      color = "#00F";
    } else if (vBox.value < 0) {
      stars[i].w -= Math.abs(vBox.value / 10);
      stars[i].h -= Math.abs(vBox.value / 10);
      color = "#F00";
    }
    if (stars[i].w > 600 || stars[i].h > 600) {
      stars[i].w = 600;
      stars[i].h = 600;
    } else if (stars[i].w < 5 || stars[i].h < 5) {
      stars[i].w = 5;
      stars[i].h = 5;
    }
  }
}
// Only call it if you haven't already done (i.e in a load event)
start();

body {
   text-align: center;
   background-image: url("stars.png");
 }
 #container {
   position: fixed;
   color: red;
   top: 0px;
   left: 0px;
 }
 #textBox {
   position: absolute;
   top: 25px;
   left: 5px;
 }
 #slider {
   position: absolute;
   top: 25px;
   left: 200px;
 }

<canvas id="canvas" width="1024" height="768"></canvas>
<div id="container">
  <div id="textBox">
    Velocity:
    <input type="text" id="textbox" value="0">
  </div>
  <div id="slider">
    Slider:
    <form oninput="amount.value=rangeInput.value">
      <input type="range" id="rangeInput" name="rangeInput" min="-100" max="100" step="3" value="0">
      <output name="amount" for="rangeInput">0</output>
    </form>
  </div>
</div>

原答案

首先，每次致电changeImgColorToBlue时，您都需要更新imageData。其次，为了不将所有像素都更改为蓝色，您必须检查每个像素是否在某个颜色范围内。
假设你的星星.png看起来像一个黑色背景，上面有彩色点，你可以这样做：

for (var i = 0; i < data.length; i += 4) {
    if( data[i]>0 || data[i+1]>0 || data[i+2]>0 ){
    //is our pixel black?
    data[i] = 0;// red
    data[i + 1] = 0; // green
    data[i + 2] = 255; // blue
    }
}

当然，您可以更改这些条件以更精确地匹配点的实际颜色，例如，如果您的点是黄色
的 if( data[i]>=200 && data[i+1]>=200 && data[i+2]<100 )

另外，我对你的代码做了一些更改，因为你对某些函数有多余的调用。

//Create the images(Using a canvas for CORS issues)
function createStars(){
var imgCanvas = document.createElement('canvas');
imgCanvas.height="500";
imgCanvas.width="500";
var imgCtx = imgCanvas.getContext('2d');
imgCtx.fillStyle= 'black';
imgCtx.fillRect(0,0,500,500)
imgCtx.fillStyle= '#FF0';
for(i=0; i<Math.floor(Math.random()*500)+250; i++){
  imgCtx.fillRect(Math.random()*500, Math.random()*500, 1,1)
  }
document.body.style.backgroundImage='url('+imgCanvas.toDataURL()+')';
}
createStars();
function createStar(){
var imgCanvas = document.createElement('canvas');
imgCanvas.height="50";
imgCanvas.width="50";
var imgCtx = imgCanvas.getContext('2d');
imgCtx.fillStyle= '#FF0';
imgCtx.fillRect(Math.random()*45,Math.random()*45, 5,5);
return imgCanvas.toDataURL();
}
var canvas = null;
var ctx = null;
var image = null;
var slider = null;
var vBox = null;
var x = 50;
var y = 50;
var scaleX;
var scaleY;
var center = {
  x: 0,
  y: 0
};
var radius = 50.0;
var angle = 0;
var result = false;
var textActive = false;
var imgArr = null;
var imageData;
var data;
var backgroundImg = null;
function start() {
  ctx = getCtxReference();
  result = setOtherReferences();
  image = getStarImages();
  if (image != null && result && imgArr != null) {
    Loop();
  }
}
function getCtxReference() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  return ctx;
}
function setOtherReferences() {
  slider = document.getElementById("rangeInput");
  vBox = document.getElementById("textbox");
  scaleX = 100;
  scaleY = 100;
  center.x = canvas.width / 3;
  center.y = canvas.height / 3;
  return true;
}
function drawImg() {
  ctx.drawImage(image, x, y, scaleX, scaleY);
  return true;
}
function Loop() {
  window.setTimeout(Loop, 100);
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(backgroundImg, 0,0);
  angle += Math.PI * 0.05;
  x = center.x + radius * Math.cos(angle);
  y = center.y + radius * Math.sin(angle);
  vBox.value = slider.value;
  updateStarScale();
  drawImg();
}
function getStarImages() {
  //as they're all the same image, you don't need to make an array of them, simply make a loop below
  var img = new Image();
  img.addEventListener('load', drawBackgroundStar)
  img.src = createStar();
  return img;
}
function drawBackgroundStar() {
  for (var i=0; i<500; i++) {
    ctx.drawImage(image, getRandomArbitrary(0, canvas.width), getRandomArbitrary(0, canvas.height), getRandomArbitrary(5, 15), getRandomArbitrary(5, 15));
  }
    backgroundImg = new Image();
    backgroundImg.addEventListener('load', Loop);
    backgroundImg.src = canvas.toDataURL();
}
function updateStarScale() {
  if (vBox.value > 0) {
    scaleX += vBox.value / 10;
    scaleY += vBox.value / 10;
   changeImgColorToBlue();
  } else if (vBox.value < 0) {
    scaleX -= Math.abs(vBox.value / 10);
    scaleY -= Math.abs(vBox.value / 10);
    changeImgColorToRed();
  }
  if (scaleX > 600 || scaleY > 600) {
    scaleX = 600;
    scaleY = 600;
  } else if (scaleX < 50 || scaleY < 50) {
    scaleX = 50;
    scaleY = 50;
  }
}
function changeImgColorToBlue() {
  imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    //is our data black?
    if(data[i]>0||data[i+1]>0||data[i+2]>0){
    data[i] = 0;// red
    data[i + 1] = 0; // green
    data[i + 2] = 255; // blue
 }
    }
  ctx.putImageData(imageData, 0, 0);
}
function changeImgColorToRed() {
  imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    if(data[i]>0||data[i+1]>0||data[i+2]>0){
    data[i] = 255;// red
    data[i + 1] = 0; // green
    data[i + 2] = 0; // blue
 }
    }
  ctx.putImageData(imageData, 0, 0);
}
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
start();

body {
    text-align: center;
  }
  #container {
    position: fixed;
    color: red;
    top: 0px;
    left: 0px;
  }
  #textBox {
    position: absolute;
    top: 25px;
    left: 5px;
  }
  #slider {
    position: absolute;
    top: 25px;
    left: 200px;
  }

<canvas id="canvas" width="1024" height="768"></canvas>
  <div id="container">
    <div id="textBox">
      Velocity:
      <input type="text" id="textbox" value="0">
    </div>
    <div id="slider">
      Slider:
      <form oninput="amount.value=rangeInput.value">
        <input type="range" id="rangeInput" name="rangeInput" min="-100" max="100" step="3" value="">
        <output name="amount" for="rangeInput">0</output>
      </form>
    </div>
  </div>

在您编写它时，changeImgColorToBlue函数只会更改画布的背景星星。我不确定这是您想要实现的目标，所以这里有一种方法可以只更改这个点：

function createStars(){
var imgCanvas = document.createElement('canvas');
imgCanvas.height="500";
imgCanvas.width="500";
var imgCtx = imgCanvas.getContext('2d');
imgCtx.fillStyle= 'black';
imgCtx.fillRect(0,0,500,500)
imgCtx.fillStyle= '#FF0';
for(i=0; i<Math.floor(Math.random()*500)+250; i++){
  imgCtx.fillRect(Math.random()*500, Math.random()*500, 1,1)
  }
document.body.style.backgroundImage='url('+imgCanvas.toDataURL()+')';
}
createStars();
function createStar(){
var imgCanvas = document.createElement('canvas');
imgCanvas.height="50";
imgCanvas.width="50";
var imgCtx = imgCanvas.getContext('2d');
imgCtx.fillStyle= '#FF0';
imgCtx.fillRect(Math.random()*45,Math.random()*45, 5,5);
return imgCanvas.toDataURL();
}
var canvas = null;
var ctx = null;
var starCanvas = null;
var starCtx = null;
var image = null;
var slider = null;
var vBox = null;
var x = 50;
var y = 50;
var scaleX;
var scaleY;
var center = {
  x: 0,
  y: 0
};
var radius = 50.0;
var angle = 0;
var result = false;
var textActive = false;
var imgArr = null;
var imageData;
var data;
var backgroundImg = null;
function start() {
  ctx = getCtxReference();
  starCtx = getStarReference();
  result = setOtherReferences();
  image = getStarImages();
  if (image != null && result && imgArr != null && backgroundImg != null) {
    Loop();
  }
}
function getCtxReference() {
  canvas = document.getElementById("canvas");
  return canvas.getContext('2d');
}
function getStarReference() {
  starCanvas = document.createElement("canvas");
  starCanvas.height = 50;
  starCanvas.width = 50;
  starCanvas.id=('star');
  document.body.appendChild(starCanvas);
  return starCanvas.getContext('2d');
  
}
function setOtherReferences() {
  slider = document.getElementById("rangeInput");
  vBox = document.getElementById("textbox");
  scaleX = 100;
  scaleY = 100;
  center.x = canvas.width / 3;
  center.y = canvas.height / 3;
  return true;
}
function drawImg() {
  ctx.drawImage(starCanvas, x, y, scaleX, scaleY);
  return true;
}
function Loop() {
  window.setTimeout(Loop, 100);
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(backgroundImg, 0,0);
  angle += Math.PI * 0.05;
  x = center.x + radius * Math.cos(angle);
  y = center.y + radius * Math.sin(angle);
  vBox.value = slider.value;
  updateStarScale();
  drawImg();
}
function getStarImages() {
  //as they're all the same image, you don't need to make an array of them, simply make a loop below
  var img = new Image();
  img.addEventListener('load', drawBackgroundStar)
  img.src = createStar();
  return img;
}
function drawBackgroundStar() {
  for (var i=0; i<500; i++) {
    ctx.drawImage(image, getRandomArbitrary(0, canvas.width), getRandomArbitrary(0, canvas.height), getRandomArbitrary(5, 15), getRandomArbitrary(5, 15));
  }
   backgroundImg = new Image();
   backgroundImg.addEventListener('load', Loop);
   backgroundImg.src = canvas.toDataURL();
   
   starCtx.drawImage(image, 0,0,50,50)
}
function updateStarScale() {
  if (vBox.value > 0) {
    scaleX += vBox.value / 10;
    scaleY += vBox.value / 10;
   changeImgColorToBlue();
  } else if (vBox.value < 0) {
    scaleX -= Math.abs(vBox.value / 10);
    scaleY -= Math.abs(vBox.value / 10);
    changeImgColorToRed();
  }
  if (scaleX > 600 || scaleY > 600) {
    scaleX = 600;
    scaleY = 600;
  } else if (scaleX < 50 || scaleY < 50) {
    scaleX = 50;
    scaleY = 50;
  }
}
function changeImgColorToBlue() {
  imageData = starCtx.getImageData(0, 0, 50, 50);
  data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    //is our data black?
    if(data[i]>0||data[i+1]>0||data[i+2]>0){
    data[i] = 0;// red
    data[i + 1] = 0; // green
    data[i + 2] = 255; // blue
 }
    }
  starCtx.putImageData(imageData, 0, 0);
}
function changeImgColorToRed() {
  imageData = starCtx.getImageData(0, 0, 50, 50);
  data = imageData.data;
  for (var i = 0; i < data.length; i += 4) {
    if(data[i]>0||data[i+1]>0||data[i+2]>0){
    data[i] = 255;// red
    data[i + 1] = 0; // green
    data[i + 2] = 0; // blue
 }
    }
  starCtx.putImageData(imageData, 0, 0);
}
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
start(); 

body {
    text-align: center;
  }
  #container {
    position: fixed;
    color: red;
    top: 0px;
    left: 0px;
  }
  #textBox {
    position: absolute;
    top: 25px;
    left: 5px;
  }
  #slider {
    position: absolute;
    top: 25px;
    left: 200px;
  }

<canvas id="canvas" width="1024" height="768"></canvas>
  <div id="container">
    <div id="textBox">
      Velocity:
      <input type="text" id="textbox" value="0">
    </div>
    <div id="slider">
      Slider:
      <form oninput="amount.value=rangeInput.value">
        <input type="range" id="rangeInput" name="rangeInput" min="-100" max="100" step="3" value="">
        <output name="amount" for="rangeInput">0</output>
      </form>
    </div>
  </div>