Código HTML para tableta de dibujo con Javascript

398 blackmagicoficial53

Abrir en el editor Publica tu código

Código HTML para tableta de dibujo con Javascript

Recomendado

12 June 2025

Calculadora de impuestos de Robux

25 August 2024

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

26 January 2025

Un código de alqsdeus

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
     <script src="https://cdn.jsdelivr.net/gh/hicodersofficial/drawing-tablet@main/lib/DrawingTablet.min.js"></script><link rel="stylesheet" href="./style.css">

</head>
<body>

</script>
</body>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
    margin: 0;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#canvas-container {
    width: 100%;
    height: 100vh;
}

.dt-control-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border: 1px solid #404040;
    border-bottom: 1px solid transparent;
    background: #222222;
    display: flex;
    align-items: center;
    padding: 12px;
}
.dt-dc-container {
    border-left: 1px solid #404040;
    border-right: 1px solid #404040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
}
.dt-default-colors {
    position: relative;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    border: solid 2px transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dt-default-colors div {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: none;
}
.dt-cp-container {
    width: 28px;
    height: 28px;
    border: solid 2px transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
}
.dt-color-picker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(
            50% 50% at 50% 50%,
            #ffffff 0%,
            transparent 100%
        ),
        conic-gradient(
            from 0deg at 50% 50%,
            #ff0000 0deg,
            #ffa800 47.73deg,
            #ffff00 79.56deg,
            #00ff00 121.33deg,
            #00ffff 180.99deg,
            #0000ff 238.67deg,
            #ff00ff 294.36deg,
            #ff0000 360deg
        ),
        #c4c4c4;
    transform: rotate(105deg);
}

.hide {
    display: none;
}

.dt-tools-container {
    position: relative;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dt-tools-container img {
    position: absolute;
    max-height: 70px;
    bottom: -25px;
    transition: all 0.2s;
    cursor: pointer;
}

.dt-tools-container img:hover {
    bottom: -10px;
    opacity: 0.8;
    transform: scale(1.1);
}
#size {
    width: 35px;
    height: 30px;
    margin: 0 0.8rem;
    border: none;
    border-radius: 4px;
    background: #3d3d3d;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    -moz-appearance: textfield;
}
#size::-webkit-outer-spin-button,
#size::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.dt-undo-redo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #404040;
    padding: 0 0.8rem;
}

.dt-undo-redo-container img {
    width: 18px;
    cursor: pointer;
}
.dt-download-container {
    border-left: 1px solid #404040;
    padding: 0 0.8rem;
}
.dt-download-container img {
    width: 18px;
    cursor: pointer;
}
#redo {
    margin-left: 0.8rem;
}

JS

let opts = {
    brushColor: "#ffffff",
    brushSize: parseInt(size.value)
};

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

dt.log("Drawing Tablet Initialized");

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", () => {
        dt.brushColor = e.dataset.color;
        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("Are you sure to clear?");
    if (b) {
        dt.clear();
    }
});

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

pencil.addEventListener("click", () => {
    dt.pencil();
    dt.brushSize = parseInt(size.value);
    dt.brushColor = opts.brushColor;
    isSelected();
});

highlighter.addEventListener("click", () => {
    dt.highlighter();
    dt.brushColor = opts.brushColor;
    isSelected();
});

eraser.addEventListener("click", () => {
    dt.eraser();
    isSelected();
});

Recomendado

Calculadora de impuestos de Robux

Animación Onscroll: desplazamiento dinámico de contenido con ScrollMagic

Un código de alqsdeus

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS