canvas自制简易画图板

HTML代码

    <h3>简易画图工具</h3>
    <canvas width="600" height="400"></canvas>
    <div>
        <input type="button" value="清除画布">
        <span class="red"></span>
        <span class="blue"></span>
        <span class="black"></span>
        <span class="green"></span>
        <span class="yellow"></span>
        <span class="withe"></span>
        <input type="range" min="1" max="10" id="lineWidth" value="1">
        粗细度：<p id="num">1</p>
        <input type="button" value="橡皮擦">
    </div>

CSS代码

h3 {
    width: 600px;
    text-align: center;
}

canvas {
    outline: 1px solid black;
}

span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    outline: 1px solid black;
}

span:nth-of-type(1) {
    background-color: red;
}

span:nth-of-type(2) {
    background-color: blue;
}

span:nth-of-type(3) {
    background-color: black;
}

span:nth-of-type(4) {
    background-color: green;
}

span:nth-of-type(5) {
    background-color: yellow;
}

span:nth-of-type(6) {
    background-color: white;
}

#num {
    display: inline-block;
    width: 30px;
    text-align: center;
    background-color: transparent;
    outline: 1px solid black;
    margin: 0;
}

#shadow {
    box-shadow: 0 0 10px black;
}

JS代码

let canEle = document.getElementsByTagName("canvas")[0];
let pen = canEle.getContext("2d");
let spanEles = document.getElementsByTagName("span");
let divEle = document.getElementsByTagName("div")[0];

let color;
let cuxi;
//鼠标按下获取起点位置
canEle.addEventListener("mousedown", e => {
    let event = e || window.event;
    pen.beginPath();
    pen.moveTo(event.offsetX, event.offsetY);
    canEle.addEventListener("mousemove", move)
})

//画图
function move(e) {
    let event = e || window.event;
    pen.lineTo(event.offsetX, event.offsetY);
    cuxi;
    color;
    pen.stroke();
}

//鼠标抬起停止
canEle.addEventListener("mouseup", e => {
    canEle.removeEventListener("mousemove", move);
})

//选择颜色
divEle.addEventListener("click", e => {
    let event = e || window.event;
    //清除画布
    if (event.target.value == "清除画布") {
        pen.clearRect(0, 0, 600, 400);
    }
    //改变颜色
    if (event.target.className == "red") {
        color = pen.strokeStyle = "red";
        addShadow();
        event.target.id = "shadow";
    };
    if (event.target.className == "blue") {
        color = pen.strokeStyle = "blue";
        addShadow();
        event.target.id = "shadow";
    };
    if (event.target.className == "black") {
        color = pen.strokeStyle = "black";
        addShadow();
        event.target.id = "shadow";

    };
    if (event.target.className == "green") {
        color = pen.strokeStyle = "green";
        addShadow();
        event.target.id = "shadow";
    };
    if (event.target.className == "yellow") {
        color = pen.strokeStyle = "yellow";
        addShadow();
        event.target.id = "shadow";
    };
    if (event.target.className == "withe") {
        color = pen.strokeStyle = "transparent  ";
        addShadow();
        event.target.id = "shadow";
    };
    //橡皮擦
    if (event.target.value == "橡皮擦") {
        console.log(1);
        pen.beginPath();
        pen.moveTo(event.offsetX, event.offsetY);
        pen.lineTo(event.offsetX, event.offsetY);
        pen.lineWidth = 20;
        pen.strokeStyle = "#fff";
        pen.stroke();
    }
})

//改变线条粗细
lineWidth.addEventListener("change", e => {
    cuxi = pen.lineWidth = lineWidth.value;
    num.innerHTML = `${lineWidth.value}`;
})

//加阴影
function addShadow() {
    [...spanEles].map(item => {
        item.id = "";
    })
}

网页效果图如下，点击颜色可以选取画笔的颜色，可以选择画笔的粗细等