Source: sample/meteor-shower/app.js

  1. "use strict";
  3. /**
  4.  * Create a meteor shower sample application.
  5.  * @param {HTMLElement} container A application container.
  6.  * @param {number} width The width of canvas.
  7.  * @param {number} height The height of canvas.
  8.  * @param {string} backcolor1 A background color for UI-thread.
  9.  * @param {string} backcolor2 A background color for Worker-thread.
  10.  * @returns {undefined}
  11.  */
  12. function App(container, width, height, backcolor1, backcolor2) {
  13.     container.insertAdjacentHTML("beforeend", `
  14.         <input type="radio" id="workerUsageNoUse" name="workerUsage" value="nouse"
  15.                checked="checked"/>
  16.         <label for="workerUsageNoUse">Single threading (using setInterval)</label>
  17.         <input type="radio" id="workerUsageUse" name="workerUsage" value="use" />
  18.         <label for="workerUsageUse">Multi threading (using worker)</label>
  19.         <div style="background-color: #002">
  20.             <canvas style="width:${width}px;height:${height}px"></canvas>
  21.         </div>`
  22.     );
  24.     const canvas = container.querySelector("canvas");
  25.     const ctx = canvas.getContext('2d');
  26.     const singleApp = new MeteorShower(ctx);
  27.     singleApp.setWidth(width);
  28.     singleApp.setHeight(height);
  29.     singleApp.setBackcolor(backcolor1);
  30.     singleApp.setCount(1000);
  31.     singleApp.initialize();
  33.     const multiApp = new TransWorker();
  34.     multiApp.create(
  35.         "meteor-shower-worker.js",
  36.         MeteorShower, this, {
  37.         "fillRects": fillRects => {
  38.             for(const rect of fillRects) {
  39.                 ctx.fillStyle = rect.fillColor;
  40.                 ctx.fillRect(
  41.                     rect.x, rect.y,
  42.                     rect.w, rect.h);
  43.             }
  44.         }
  45.     });
  46.     multiApp.setWidth(width, null);
  47.     multiApp.setHeight(height, null);
  48.     multiApp.setBackcolor(backcolor2, null);
  49.     multiApp.setCount(1000, null);
  50.     multiApp.initialize();
  52.     let usingWorker = false;
  53.     const radios = container.querySelectorAll("[name='workerUsage']");
  54.     for(const inp of radios) {
  55.         inp.addEventListener("change", () => {
  56.             if(usingWorker) {
  57.                 multiApp.stop(
  58.                     () => singleApp.start());
  59.             } else {
  60.                 singleApp.stop();
  61.                 multiApp.start();
  62.             }
  63.             usingWorker = (inp.value === "use");
  64.         });
  65.     }
  66.     singleApp.start();
  67. }
  68. App(document.querySelector("#app"), 640, 480, "#004", "#044");