Mount a Strobe Light inside the JS canvas

Question

Mount a Strobe Light inside the JS canvas

Navigation

#1 by (1 votes)

1

I have a task to develop for college but I have some problems.

First let me try to explain what to do:

I need to simulate a strobe light based on some colors in an HTML selector. The user must choose the range (I have not done the range yet, I do not know how it is). Then the user needs to choose which color he wants to be part of Strobe. When you click on Add Color this chosen color should be listed below the "Color Order". When you click on Dance Party the chosen colors should begin to flash on the canvas according to the chosen range.

So far I've been able to develop this:

HTML:

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Strobe Light</title>
    <script src="a6.js" type="text/javascript" defer></script>
   </head>

  <body onload="setUp()">
    <h1>Strobe Light</h1>

    <p>How fast should it flash? Enter a number between 1-15000 ms <input type="text" name="" id="strobeSpeed" value=""></p>

    <p>What colours should flash?
      <select id="colorSelector">
        <option value="white">White</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
        <option value="black">Black</option>
        <option value="orange">Orange</option>
      </select>
      <button type="button" id="addColour" name="button">Add Colour</button>
      <button type="button" id="clearColour" name="button">Clear Colour</button>
    </p>

    <p>Colour Order</p>
    <ul id="colourOrder"></ul>

    <button type="button" id="danceParty" name="button">Dance Party!!!!!</button>

    <br>
    <br>

    <canvas id="myCanvas" height="300" width="300" style="border: 1px solid black"></canvas>

  </body>
</html>

JS:

let canvas;
let ctx;

function setUp(){
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
   let showColour = document.getElementById("colourOrder");

   document.getElementById('addColour').onclick = function(){
     ctx.fillStyle = document.getElementById('colorSelector').value;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   };

   document.getElementById('clearColour').onclick = function(){
     ctx.fillStyle = "white";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   };

   document.getElementById('danceParty').onclick = function(){

   };
}

javascript html canvas setinterval

asked by anonymous 28.02.2018 / 21:56

1 answer

Convert value from a component select options em number Monitor battery usage in the application itself [closed]

score 1 · Answer 1

You need to create an array with colors.

let canvas;
let ctx;

function setUp(){
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  let showColour = document.getElementById("colourOrder");
  let colors = [];

  document.getElementById('addColour').onclick = function() {
    colors.push(document.getElementById('colorSelector').value);
  };

  document.getElementById('clearColour').onclick = function() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

  };

  document.getElementById('danceParty').onclick = function() {
    let i = 0;
    setInterval(function() {
      ctx.fillStyle = colors[i];
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      i++;
      if (i >= colors.length) {
        i = 0;
      }
    }, document.getElementById('strobeSpeed').value);
  };
}