javascript - 无法在我的 JavaScript 绘图板中更改颜色

问题描述

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Paint, Inc.</title>
    </head>
    <body>
        <div id="sideNav">
            <a href="#"></a>
        </div>
        <canvas id="canvas"></canvas>

        <script src="canvas.js"></script>
        <button id="clear">X</button>
        <section id="leftBumper"></section>

        <section id="rightNav">
            <button id='colorBlack'></button>
            <button id='colorBlue'></button>
            <button id='colorRed'></button>
        </section>
    </body>
</html>
```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#canvas {
    border: 0.0001px solid white;
}

html {
    overflow: hidden;
}

#clear {
    position: absolute;
    top: 0;
    left: 0;
    bottom: -10px;
    width: 30px;
    background: rgba(70, 70, 70, 0.32);
    border: rgba(70, 70, 70, 0.32);
    border-width: 5px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    color: red;
}

#clear:hover {
    background: rgba(20, 20, 20, 0.4);
    cursor: pointer;
}

#clear:focus {
    outline: 0;
}

#leftBumper {
    margin-top: 0;
    margin-left: 32px;
    margin-bottom: 0;
    width: 5px;
    color: black;
}

#rightNav {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -10px;
    width: 30px;
    background: rgba(70, 70, 70, 0.32);
    border: rgba(70, 70, 70, 0.32);
}

#colorBlack {
    position: absolute;
    width: 32px;
    height: 33.333333333333333333333333333%;
    background-color: black;
    float: right;
    border: black;
}

#colorBlack:hover {
    cursor: pointer;
}

#colorBlack:focus {
    outline: 0;
}

#colorBlue {
    position: absolute;
    top: 33.333333333333333333333333333%;;
    width: 32px;
    height: 33.333333333333333333333333333%;;
    background-color: blue;
    float: right;
    border: black;
}

#colorBlue:hover {
    cursor: pointer;
}

#colorBlue:focus {
    outline: 0;
}

#colorRed {
    position: absolute;
    top: 66.6666666666666666666666666666%;;
    width: 32px;
    height: 33.333333333333333333333333333%;;
    background-color: red;
    float: right;
    border: black;
}

#colorRed:hover {
    cursor: pointer;
}

#colorRed:focus {
    outline: 0;
}
```
window.addEventListener('load', () => {
    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');

    //variables
    const clearButton = document.querySelector('#clear');
    const colorChangeBlack = document.querySelector('#colorBlack');
    const colorChangeBlue = document.querySelector('#colorBlue');
    const colorChangeRed = document.querySelector('#colorRed');

    let painting = false;

    function startPosition(e) {
        painting = true;
        draw(e)
    }
    function finishedPosition() {
        painting = false;
        ctx.beginPath();
    }

    function draw(e) {
        if(!painting) return;
        ctx.lineWidth = 7;
        ctx.lineCap = "round";
        ctx.lineTo(e.clientX, e.clientY)
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY)
    }
    //Event listeners
    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', finishedPosition);
    canvas.addEventListener('mousemove', draw)

    //Buttons
    clearButton.addEventListener('click', clearCanvas);

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
});

window.addEventListener('resize', resizeCanvas);
function resizeCanvas() {
    //Resizing
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
}
resizeCanvas();

我是 JavaScript 的初学者。我希望用于颜色更改的 3 个按钮正常工作，但不知道该怎么做。请帮忙。我尝试添加会改变颜色但无法使其工作的事件侦听器和函数。有关如何更改颜色甚至添加色轮而不仅仅是 3 种颜色的任何提示。

标签： javascripthtmlcss

javascript - 无法在我的 JavaScript 绘图板中更改颜色

问题描述

解决方案

推荐阅读