在javascript中设置动画时更改图像颜色

【问题标题】：changing image color while animating it in javascript在javascript中设置动画时更改图像颜色
【发布时间】：2015-03-13 13:32:00
【问题描述】：

我在画布上绘制了一张图像。现在的图像在每一帧上做一个简单的圆形旋转。 图像缩放基于文本框中输入的值。

我按照下面的建议放置了 jsfiddle

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;

function start() {
  ctx = getCtxReference();
  image = getImageReference();
  result = setOtherReferences();
  imgArr = getStarImages();
  imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  data = imageData.data;

  for (var i = 0; i < imgArr.length; i++) {
    imgArr[i].addEventListener('load', drawBackgroundStar)
  }
  if (image != null && result && imgArr != null) {
    Loop();
  }
}

function checkKeyPressed(e) {
  if (e.keyCode == "65") {
    changeImgColorToBlue();
  }
}

function getCtxReference() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  return ctx;
}

function getImageReference() {
  image = new Image();
  image.src = "star.png";
  image.addEventListener('load', drawImg);
  return image;
}

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 getStarImages() {
  var arr = new Array();
  for (var i = 0; i < 500; i++) {
    var img = new Image();
    img.src = "star.png";
    arr.push(img);
  }
  return arr;
}

function drawImg() {
  ctx.drawImage(image, x, y, scaleX, scaleY);
  return true;
}

function drawBackgroundStar() {
  for (var i = 0; i < imgArr.length; i++) {
    ctx.drawImage(imgArr[i], getRandomArbitrary(0, canvas.width), getRandomArbitrary(0, canvas.height), getRandomArbitrary(5, 15), getRandomArbitrary(5, 15));
  }
}

function Loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  window.setTimeout(Loop, 100);
  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();
  //drawBackgroundStar();
}

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() {
  for (var i = 0; i < data.length; i += 4) {
    data[i] = 0; // red
    data[i + 1] = 0; // green
    data[i + 2] = 255; // blue
  }
  ctx.putImageData(imageData, 0, 0);
}

function changeImgColorToRed() {

}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
<html>
<style type="text/css">
  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;
  }
</style>

<body onload="start()">
  <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>
  <script type="text/javascript" src="main.js">
  </script>
</body>

</html>

所以在我的 Loop() 中，我正在更新图像的位置。在 updateStarScale() 中，我根据用户在文本框中给出的值缩放图像大小。所有这一切都很好。我唯一担心的是 changeImgColorToBlue() 对图像颜色没有任何作用。我希望将图像颜色更改为蓝色，但这不起作用。我做错了什么？

**

更新 1.0：

**

根据上一篇文章的建议，我将代码更改为以下。现在屏幕上有两个黄色星星，它们根据滑块放大，但除了缩放之外，我希望它们的颜色发生变化，即当它们放大时它们变成蓝色，当它们缩小时它们变成红色但颜色不会改变。

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

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 imageData;
var data;
var backgroundImg = null;


function start() {
  ctx = getCtxReference();
  result = setOtherReferences();
  image = getStarImages();

  if (image != null)
    image.addEventListener('load', Loop);
}

function getCtxReference() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext('2d');
  return ctx;
}


function setOtherReferences() {
  slider = document.getElementById("rangeInput");
  vBox = document.getElementById("textbox");
  scaleX = 150;
  scaleY = 150;
  center.x = canvas.width / 3;
  center.y = canvas.height / 3;
  return true;
}

function getStarImages() {
  var img = new Image();
  img.src = createStar();
  return img;
}


function createStar() {
  ctx.fillStyle = '#FF0';
  ctx.fillRect(Math.random() * 45, Math.random() * 45, scaleX, scaleY);
  return canvas.toDataURL();
}

function drawImg() {
  ctx.drawImage(image, x, y, scaleX, scaleY);
}


function Loop() {
  window.setTimeout(Loop, 100);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  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 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();

【问题讨论】：

  • 你如何设置一个 jsfiddle 来帮助我们看看你在做什么？
  • 我按照你的建议做了。如果这不是你的意思，我很抱歉，因为我是在这里发布 JavaScript 问题的新手。
  • 您的 changeImgColorToBlue 有一个有趣的 for 循环。第一轮更改data[0], data[1], data[2]，然后下一轮更改data[4], data[5], data[6]。您可能只想设置一次 RGB 值。 ctx.putImageData(imageData, 0, 0) 也没有做任何事情。
  • 我不太清楚如何操作像素数据。我只是从互联网上复制粘贴代码 sn-p 只是为了看看它是否有效。

标签： javascript html css image


【解决方案1】：

编辑

好的，所以如果你只需要画那些移动的星星，你可以简化很多代码，尤其是改变颜色：
由于每颗星只是一个彩色矩形，您只需要存储一个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。 其次，为了不将所有像素都变为蓝色，您必须检查每个像素是否在某个颜色范围内。
假设你的 star.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]&gt;=200 &amp;&amp; data[i+1]&gt;=200 &amp;&amp; data[i+2]&lt;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>

【讨论】：

  • 感谢您在我的代码中的更新。这真的很有帮助！
  • 嘿，我稍微更改了代码以适应我的目标。我只需要一颗星，即代码中的“黄星”，它会在屏幕上旋转，根据滑块向上和向下缩放并相应地更改颜色。我更改了代码并将其设置为只有两颗黄色星星，但这些星星的颜色没有改变。你能看一下吗。我已经更新了我原来的帖子
  • @Htlcs 更新答案。
猜你喜欢
  • 2018-04-07
  • 2018-01-24
  • 2016-12-13
  • 2010-10-18
  • 2014-08-15
  • 1970-01-01
  • 1970-01-01
  • 2013-09-10
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode