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

时间：2015-03-10 04:40:19

标签： javascript html css image

我在画布上绘制了一幅图像。现在的图像是在每个帧上进行简单的循环旋转。 图像缩放基于文本框中输入的值。

我按照以下建议放置了jsfiddle

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

**

  

更新1.0：

**

根据上一篇文章的建议，我将代码更改为以下内容。现在屏幕上有两颗黄色的星星，它们根据滑块放大，但除了缩放之外，我希望它们的颜色可以改变，即当它们按比例放大时，它们会变成蓝色，当它们按比例缩小时，它们会变成红色，但颜色会变为“39”。 ;改变。

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

1 个答案:

答案 0 :(得分：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>

原始答案

首先，每次致电imageData时，您都需要更新changeImgColorToBlue。 其次，为了不将所有像素更改为蓝色，您必须检查每个像素是否在某种颜色范围内 假设你的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]>=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>

相关问题
最新问题