Mount a Strobe Light inside the JS canvas

Asked

Viewed 29 times

1

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

First let me try to explain what to do:

I need to simulate a strobe light based on a few colors in an HTML selector. The user should choose the interval (I haven’t taken the interval, I don’t know how it is). Then the user needs to choose which color he wants to be part of Strobe. When you click on Add Colour this chosen color should be listed below the "Colour Order". When you click on the Dance Party the chosen colors should start flashing 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

1 answer

1

You need to create an array of 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);
  };
}

Browser other questions tagged javascript html canvas setinterval

You are not signed in. Login or sign up in order to post.