1

    <div class="dt-dc-container">
      <div class="dt-default-colors" data-color="#ffffff" style="border: 2px solid rgb(255, 255, 255);">
        <div style="background: rgb(255, 255, 255);"></div>
      </div>
      <div class="dt-default-colors" data-color="#f24822" style="border: 2px solid transparent;">
        <div style="background: rgb(242, 72, 34);"></div>
      </div>
      <div class="dt-default-colors" data-color="#ffa629" style="border: 2px solid transparent;">
        <div style="background: rgb(255, 166, 41);"></div>
      </div>
      <div class="dt-default-colors" data-color="#ffcd29" style="border: 2px solid transparent;">
        <div style="background: rgb(255, 205, 41);"></div>
      </div>
      <div class="dt-default-colors" data-color="#14ae5c" style="border: 2px solid transparent;">
        <div style="background: rgb(20, 174, 92);"></div>
      </div>
      <div class="dt-default-colors" data-color="#0d99ff" style="border: 2px solid transparent;">
        <div style="background: rgb(13, 153, 255);"></div>
      </div>
      <div class="dt-default-colors" data-color="#9747ff" style="border: 2px solid transparent;">
        <div style="background: rgb(151, 71, 255);"></div>
      </div>
    </div>

    <div class="dt-cp-container">
      <label for="dtPicker" class="dt-color-picker">
        <input id="dtPicker" type="color" style="visibility: hidden; opacity: 0; width: 0; height: 0">
      </label>
    </div>

    <div class="dt-undo-redo-container">
      <div class="">
        <img src="/draw1/assets/undo.png" title="Undo (Ctrl + Z)" id="undo" alt="">
      </div>
      <div class="">
        <img src="/draw1/assets/redo.png" title="Redo (Ctrl + Y)" id="redo" alt="">
      </div>
    </div>
    <div class="dt-download-container">
      <img src="/draw1/assets/download.png" title="Download (Ctrl + E)" id="download" alt="">
    </div>
  </div>
<canvas width="811" height="641" style="background: rgb(24, 24, 24);"></canvas></div>
<script src="/draw1/lib/DrawingTablet.js"></script>
<script>
  let isBrush = true;
  let opts = {
    brushColor: "#ffffff",
    brushSize: parseInt(size.value),
  };

  // Initializing Drawing Tablet
  const dt = new DrawingTablet("#canvas-container", {
    logs: true,
    fullscreen: true,
    brushSize: opts.brushSize,
    bg: "#181818",
    color: opts.brushColor,
    autosave: true,
  });

  dt.log("画板初始化");

  const dcs = document.querySelectorAll(".dt-default-colors");
  const dcp = document.querySelectorAll(".dt-cp-container");

  dcs.forEach((e) => {
    e.children[0].style.background = e.dataset.color;
    selectColor();
    e.addEventListener("click", () => {
      if (isBrush) {
        dt.brushColor = e.dataset.color;
        opts.brushColor = e.dataset.color;
      } else {
        opts.brushColor = e.dataset.color;
      }
      selectColor();
    });
  });
  function selectColor() {
    dcs.forEach((el) => {
      el.style.border = `2px solid  ${
        opts.brushColor === el.dataset.color
          ? el.dataset.color
          : "transparent"
      }`;
    });
  }
  dtPicker.addEventListener("input", (e) => {
    dt.brushColor = e.target.value;
    selectColor();
  });
  download.addEventListener("click", () => {
    dt.download();
  });
  undo.addEventListener("click", () => {
    dt.undo();
  });
  redo.addEventListener("click", () => {
    dt.redo();
  });
  clear.addEventListener("click", () => {
    const b = confirm("确认清空画板?");
    if (b) {
      dt.clear();
    }
  });

  eraser.addEventListener("click", () => {
    isBrush = false;
    opts = {
      brushColor: dt.brushColor,
      brushSize: dt.brushSize,
    };
    dt.brushSize = 40;
    dt.brushColor = dt.opts.bg;
    isSelected();
  });

  size.addEventListener("input", (e) => {
    dt.brushSize = parseInt(e.target.value);
  });

  brush.addEventListener("click", () => {
    isBrush = true;
    dt.brushSize = opts.brushSize;
    dt.brushColor = opts.brushColor;
    isSelected();
  });

  function isSelected() {
    if (isBrush) {
      document.querySelector("#brush").style.bottom = "-10px";
      document.querySelector("#eraser").style.bottom = "-25px";
    } else {
      document.querySelector("#brush").style.bottom = "-25px";
      document.querySelector("#eraser").style.bottom = "-10px";
    }
  }
</script>